상태 관리 | jtwjs Dev Wiki

상태 관리

컴포넌트

레고 블록, 재사용 가능한 코드 단위
각각의 레고 블록이 큰 구조를 만드는 과정에서 고유한 목적을 갖는 것처럼, 모든 컴포넌트는 앱에서 구분된 목적을 갖는다.

구조를 캡슐화한 UI(HTML), 동작(JS), 스타일(CSS)의 렌더링을 담당

상태는 컴포넌트의 렌더링 혹은 행동에 영향을 미친다.

즉, 상태 변화에 대한 응답으로 그 표현과 행동을 조정한다.

컴포넌트 간 데이터 관리

props 자식 컴포넌트로 데이터를 전달하기 위해 사용하는 특수한 매개변수

컴포넌트들이 소통할 수 있는 방법을 제공 (부모 -> 자식)
반대로 (자식 -> 부모)로 소통 해야하는 상황에서는 보통 콜백 함수를 사용해 달성한다.

자식 상태를 부모에서 변경하려면?

imperative (명령)
ref와 함께 사용해야함
- 상위 컴포넌트에서 제공하는 ref를 참조 -> forwardRef (react 19에서 제거될 예정)
하위 컴포넌트에 구현된 함수를 상위 컴포넌트에서 참조해야할 때
하위 컴포넌트의 상태를 상위 컴포넌트에서 변경해야할 때

ref를 사용하는 명령형 프로그래밍은 리엑트의 선언형 프로그래밍과 맞지 않음
ref와 state를 따로 들고 가면 데이터 정합성이 틀려지는 경우가 생길 수 있음
- 어떤 데이터들이 값이 서로 일치함

prop 내려보내기

컴포넌트 트리에서 하위 자식 컴포넌트 각각에 props를 선언하여 내려보내 깊이 중첩된 상태를 props driling
- 유지보수성 저하, 가독성 저하, 데이터 흐름 추적하기 어려움
- 데이터 구조에 수정이 필요하다면 모든 중간 컴포넌트에 변경을 해야함
- prop을 전달할 필요 없이 컴포넌트 사이에서 값을 공유하는 방법 제공
- react 19에서는 use가 컨텍스트 데이터 접근을 위한 권장 접근법이 됨

고려사항

최근에는 Next.js 같은 강력한 서버 사이드 렌더링 프레임워크 덕분에 서버 사이드 상태 관리가 단순해져 복잡한 클라이언트 상태관리는 거의 필요하지 않다. 클라이언트 사이드와 서버 사이드 상태 사이의 명확한 선을 그음으로써 우리 팀은 리액트의 내장 리듀서와 콘텍스트 공급자를 사용해 성능이 뛰어나고 유지보수 가능한 상태 관리 아키텍처를 구축했다. - 제프리 펑 Jeffrey Peng