NextJS Hook정리

Next.js에서 사용되는 **클라이언트 사이드 훅(Client Side Hooks)**과 **서버 사이드 훅(Server Side Hooks)**에 대해서 정리해 보겠습니다. 클라이언트 사이드 훅은 React의 기본 훅들을 주로 사용하며, 서버 사이드에서는 Next.js가 제공하는 특정 훅들을 사용하게 됩니다.

각각의 훅들이 어떤 경우에 유용하게 사용되는지, 많이 사용하는 순서대로 설명드리겠습니다.

1. 클라이언트 사이드 훅 (Client Side Hooks)

클라이언트 사이드 훅은 주로 사용자의 상호작용, UI 상태 관리, 효과적인 로직을 위해 사용됩니다. 다음은 React에서 자주 사용하는 클라이언트 사이드 훅들입니다.

1. useState
   • 설명: 상태를 관리하기 위한 훅입니다. 간단한 상태 변수나 사용자 입력 데이터를 관리하는 데 자주 사용됩니다.
   • 사용 예시: 사용자가 버튼을 클릭할 때마다 카운터 값을 증가시키거나, 폼의 입력 값을 저장하는 경우.
2. useEffect
   • 설명: 컴포넌트의 생명주기(mount, update, unmount)에 대한 작업을 수행하기 위한 훅입니다. 데이터 fetching이나 DOM 업데이트 등을 수행합니다.
   • 사용 예시: 컴포넌트가 처음 렌더링될 때 API 호출, props가 변경될 때 부수효과 처리, 타이머 설정 및 클리닝.
3. useRef
   • 설명: DOM 요소나 값의 참조를 저장하고 싶을 때 사용하는 훅입니다. 컴포넌트가 리렌더링되더라도 변경되지 않는 값 참조.
   • 사용 예시: HTML 요소에 직접 접근하기 위한 참조나 이전 값을 유지해야 할 때 사용.
4. useContext
   • 설명: 부모 컴포넌트에서 제공하는 데이터를 깊이 중첩된 하위 컴포넌트까지 전달할 때 사용하는 훅입니다.
   • 사용 예시: 전역적으로 필요한 사용자 인증 정보나 테마 설정 등을 쉽게 전달하기 위해 사용.
5. useCallback
   • 설명: 함수형 컴포넌트를 리렌더링하지 않고 기존 콜백 함수를 재사용하도록 만드는 훅입니다.
   • 사용 예시: 자식 컴포넌트에 props로 함수를 전달할 때 함수를 메모이제이션하여 성능 최적화.
6. useMemo
   • 설명: 값을 메모이제이션하여 성능을 최적화하기 위한 훅입니다. 특정 연산이 비싸고 리렌더링을 피하고 싶을 때 사용합니다.
   • 사용 예시: 복잡한 계산이 포함된 값을 캐싱하여 성능 최적화.
7. useReducer
   • 설명: 복잡한 상태 관리를 할 때 사용합니다. useState와 비슷하지만, 상태 업데이트 로직을 여러 조건으로 나누어 관리하기 쉽습니다.
   • 사용 예시: 폼의 상태나 여러 타입의 이벤트를 처리할 때 상태 로직을 간단하게 유지하기 위해 사용.

2. 서버 사이드 훅 (Server Side Hooks)

Next.js의 서버 사이드 훅은 주로 데이터 fetching이나 서버 사이드에서 필요한 처리를 위한 훅입니다. 서버 사이드 훅들은 클라이언트에서 동작하지 않으며, 서버에서만 사용됩니다.

1. getServerSideProps
   • 설명: 서버 측에서 요청 시마다 데이터를 가져와 페이지를 렌더링합니다. 요청마다 실행되므로 사용자별로 동적 데이터가 필요할 때 사용합니다.
   • 사용 예시: 로그인된 사용자의 정보를 요청마다 업데이트하거나 실시간 데이터가 필요할 때 사용.
2. getStaticProps
   • 설명: 빌드 시 정적으로 한 번 데이터를 가져오고 HTML을 생성합니다. 페이지를 미리 렌더링하여 성능을 극대화하는 데 사용됩니다.
   • 사용 예시: 블로그 글이나 상품 목록 등 변동이 자주 없고 정적으로 미리 렌더링할 수 있는 페이지.
3. getStaticPaths
   • 설명: 동적 경로를 가진 정적 페이지들을 생성하기 위한 경로 목록을 제공합니다. getStaticProps와 함께 사용되어 동적 라우트를 정적 페이지로 미리 생성합니다.
   • 사용 예시: 특정 제품 ID에 따라 각기 다른 제품 페이지를 미리 생성할 때 사용.
4. getInitialProps (deprecated)
   • 설명: 초기 데이터 로딩을 위해 페이지 컴포넌트에서 사용되는 메서드로, getServerSideProps와 getStaticProps가 도입되기 전 사용되었습니다. 현재는 사용이 권장되지 않습니다.
   • 사용 예시: 이제는 거의 사용되지 않지만, 예전 Next.js 버전에서 서버와 클라이언트 둘 다에서 데이터를 로드할 때 사용되었습니다.
5. use (Next.js 13 이상)
   • 설명: 비동기 데이터를 서버 컴포넌트에서 동기적으로 처리할 수 있도록 도와주는 훅입니다. Promise를 기다려서 그 결과를 가져오는 데 사용됩니다.
   • 사용 예시: 서버 컴포넌트 내에서 비동기 데이터를 처리할 때, await 없이 데이터를 동기적으로 사용할 수 있습니다.

클라이언트 vs 서버 사이드 훅 정리

• 클라이언트 사이드 훅:
  • useState, useEffect, useRef, useContext 등은 사용자 상호작용과 UI 상태를 관리하는 데 사용됩니다.
  • 주로 React에서 제공하는 훅들을 사용하며, 브라우저와 직접 상호작용하는 상황에 적합합니다.
• 서버 사이드 훅:
  • getServerSideProps, getStaticProps 등은 서버 측 데이터 처리와 정적 페이지 생성에 사용됩니다.
  • Next.js에서 제공하는 훅들을 사용하여 SEO에 최적화된 페이지를 미리 렌더링하거나, 요청 시마다 필요한 데이터를 가져올 수 있습니다.