[Next.JS] Server Component와 Client Component
🧑💻 Server Component vs Client Component React 18버전 이후부터 Server Component라는 개념이 추가되어 Server Component와 Client Component라는 개념이 구분되었다. 서버 컴포넌트와 클라이언트 컴포넌트에서 사용하는 api가 다르다. 따라서 클라이언트 컴포넌트에서 사용하는 useState, useEffect와 같은 함수를 서버 컴포넌트에서 사용하는 경우 오류가 발생한다. Server Component 서버에서 동작하는 컴포넌트 Next.js에서는 기본적으로 서버 컴포넌트로 동작한다. 서버 컴포넌트는 서버에서 먼저 해석이 된 이후에 클라이언트로 전달되어 표시된다. 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 U..
[Next.JS] 페이지 라우팅
🧑💻 Next.JS 라우팅 Next.js에서는 URL을 수동으로 작성하지 않고 파일 시스템을 사용해 URL을 표현한다. 라우팅 네트워크 상의 주소로 이동하여 해당 주소에 연결되어 있는 데이터를 사용하는 일련의 과정 react의 경우 react-router-dom 패키지를 설치해 페이지 라우팅을 구현하지만 next에서는 정해둔 방식대로 폴더 구조를 구현하면 page 파일이 라우터 역할을 한다. (-> page 파일이 담긴 폴더의 이름이 경로가 됨) 1. 페이지 뼈대 만들기 상위 layout 파일에 공통으로 보여질 컴포넌트를 생성한다. 각 컴포넌트를 클릭하면 페이지가 이동할 수 있도록 a태그를 사용해 경로를 연결한다. export default function RootLayout({ children }) ..