렌더링 전략: SSG, ISR, SSR, CSR
·
FE/Next
Next.js를 다루게 되면서 일반 리액트의 렌더링 방식과는 다른 Next.js의 렌더링 방식에 대해 접하게 되었다.오늘은 웹 페이지의 네 가지 렌더링 방식에 대해 알아보려 한다! 📌 Next.js에서의 렌더링기본적으로 Next.js는 모든 페이지를 프리렌더링한다.특히 빌드 시점에 생성되는 SSG와 요청 시점에 생성되는 SSR을 지원한다.Next는 각 페이지별로 사용할 프리렌더링 방식을 선택할 수 있게 해 준다는 엄청난 장점이 있다.따라서 용도에 맞게 다른 렌더링 방식을 선택할 수 있다!*프리렌더링 - 빌드 시점에 HTML을 미리 만들어 두거나, 요청 시 HTML을 생성해 두는 것 📌 네 가지 렌더링 방식다음의 네 방식은 모두 page router 버전의 공식 명칭으로, app router에서는 다른..
React의 Component
·
FE/React
일반 JavaScript에서 React로 넘어가면서 느낀 두드러진 점 중 하나는 React엔 Component란 개념이 있다는 것이다.오늘은 그 컴포넌트에 대해 알아보려 한다!📌 Component컴포넌트는 독립적이고 재사용 가능한 코드 조각으로, js의 함수와 동일한 목적을 수행하지만 독립적으로 작용하며 JSX를 반환한다.*JSX - JavaScript 안에서 HTML처럼 보이게 쓴 문법이다.HTML 요소를 반환하는 함수로 볼 수 있다.컴포넌트는 일종의 부품과 같다. 하나의 부품이 용도가 동일하다면 이곳저곳에 재사용될 수 있는 것처럼 컴포넌트 또한 그러하다.이처럼 컴포넌트는 여러 요소에 재사용되는 것을 핵심으로 한다.컴포넌트를 사용하면 UI를 독립적이고 재사용 가능한 부분으로 나누고 각 부분을 개별적으..