[React] 리액트 상태관리 - 상태 관리 범위와 도구

상태(State)와 상태 관리란?

State: 컴포넌트의 데이터 상태

(ex) 사용자가 입력한 값이나 버튼 클릭 상태

 

상태 관리 : 화면을 변경하는 데 필요한 데이터를 관리하는 과정

 

[ 상태관리의 필요성 & 효과 ]

- 상태가 변경될 때, Virtual DOM을 사용하여 관련된 DOM만 효율적으로 업데이트함 => 불필요한 DOM 접근최소화

- 상태관리를 통해 코드 간결화와 유지보수성 강화가 가능

 

=> 상태 관리는 필요한 상태만 관리하는 것이 중요! 

최소한의 상태를 관리 : 불필요한 상태를 관리하면, 코드가 복잡해지고 렌더링 성능이 저하됨!

 

상태 관리의 범위

1) 로컬 상태 (Local State) => useState

: 각 컴포넌트 내에서만 사용되는 상태

- 사용자가 입력한 데이터를 처리하거나 UI의 동작을 제어하는 데 사용 

 

2) 전역 상태 (Global State) => Redux | Context API

: 여러 컴포넌트에서 공유되어야 하는 상태

- 사용자 인증 상태, 테마 설정(dark 테마)

 

3) 서버 상태 (Server State) => React Query | SWR

: API 호출을 통해 가져오는 데이터

- 서버에서 데이터를 가져와야 하므로 상태 업데이트가 필요

 

4) URL 상태 (URL State) => 라우팅

: 라우팅과 관련된 상태

- URL의 쿼리 파라미터나 해시값을 사용해 화면 상태를 제어

- 사용자가 페이지를 전환하면서 URL에 따라 UI가 달라지는 경우

 

상태 관리 도구

1) 리액트 Hook

• useState: 컴포넌트 내에서 로컬 상태를 관리
• useReducer: 복잡한 상태 관리를 필요로 하는 경우에 사용

2) Redux 라이브러리

: 여러 컴포넌트 간에 전역 상태를 공유할 때 유용한 상태 관리 라이브러리

 

3) Context API

: 전역 상태를 컴포넌트 계층 구조를 따라 전달할 때 사용

 

4) 상태관리 도구

: Recoil, Zustand, MobX