Next.js

상태 관리 도구

이전 절에서는 useState와 props를 이용한 기본 상태 관리, 그리고 서버/클라이언트 컴포넌트 간 폼 처리 흐름을 살펴봤습니다. 하지만 애플리케이션이 커질수록 useState와 props만으로는 한계에 부딪히는 구간이 생깁니다.

상태, 전환 조건, 결과 동작을 분리해 흐름을 추적합니다.

STATE 1

React Context API

React Context API는 props를 명시적으로 전달하지 않고도 컴포넌트 트리를 가로질러 데이터를 공유할 수 있게 해주는 React의 내장 기능입니다.

STATE 2

외부 상태 관리 라이브러리

Context API는 간단한 전역 상태 관리에는 충분하지만, 복잡한 비즈니스 로직, 대규모 상태, 비동기 작업 관리 등에서는 한계가 있습니다.

STATE 3

App Router에서의 상태 관리 전략 선택

Next.js App Router 환경에서는 서버 컴포넌트와 클라이언트 컴포넌트의 역할 분담을 고려하여 상태 관리 도구를 선택하는 것이 중요합니다.