NextJS

NextJS Hook정리

Next.js에서 사용되는 **클라이언트 사이드 훅(Client Side Hooks)**과 **서버 사이드 훅(Server Side Hooks)**에 대해서 정리해 보겠습니다. 클라이언트 사이드 훅은 React의 기본 훅들을 주로 사용하며, 서버 사이드에서는 Next.js가 제공하는 특정 훅들을 사용하게 됩니다.각각의 훅들이 어떤 경우에 유용하게 사용되는지, 많이 사용하는 순서대로 설명드리겠습니다.1. 클라이언트 사이드 훅 (Client Side Hooks)클라이언트 사이드 훅은 주로 사용자의 상호작용, UI 상태 관리, 효과적인 로직을 위해 사용됩니다. 다음은 React에서 자주 사용하는 클라이언트 사이드 훅들입니다.useState설명: 상태를 관리하기 위한 훅입니다. 간단한 상태 변수나 사용자 입력 ..

2024. 11. 30. 01:38
NextJS

RSC vs RCC

RSC (React Server Component)RSC는 React Server Component의 줄임말입니다.서버 컴포넌트라고 불리며, 이는 React 18부터 도입된 개념으로, 컴포넌트를 서버에서 렌더링하고 그 결과를 클라이언트로 전달합니다.서버 컴포넌트의 특징:예를 들어, 서버 컴포넌트는 데이터베이스와의 통신, API 호출 등을 통해 데이터를 가져와 클라이언트에게 미리 HTML 형태로 전달할 수 있습니다. 이 과정에서 브라우저에 불필요한 JavaScript가 줄어들기 때문에 초기 로딩 속도를 개선할 수 있습니다.클라이언트로 전달할 HTML을 서버에서 미리 생성합니다. 이는 서버의 리소스를 활용해서 클라이언트의 부담을 줄이는 데 도움이 됩니다.서버 컴포넌트에서는 상태 관리 훅(useState, u..

2024. 11. 29. 06:00