React State

Next 환경의 상태는 서버와 클라이언트 역할을 나눠 본다

서버 컴포넌트는 초기 데이터와 정적 구조에 강하고, 클라이언트 컴포넌트는 상호작용 상태를 가진다.

상태 위치

컴포넌트 경계

서버 컴포넌트

DB 조회나 초기 렌더링에 적합하지만 useState로 사용자 상태를 직접 갖지 않는다.

클라이언트 컴포넌트

버튼 클릭, 입력값, 토글처럼 브라우저에서 변하는 값을 관리한다.

props

부모가 읽은 값을 자식에게 넘기고, 자식은 필요한 경우 내부 상태로 이어받는다.

초기값propsuseState렌더
읽는 법

상태가 어디서 변하는지 먼저 정하면 서버/클라이언트 컴포넌트 경계가 자연스럽게 잡힌다.