상태관리

1. 상태관리

• 상태(state): UI에 동적으로 표현될 데이터
• Side Effect: 함수의 입력 외에도 함수의 결과에 영향을 미치는 요인. 예를 들어 네트워크 요청, API 호출 등이 있다.
• React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것(컴포넌트 우선 개발 방식)이다.
• 로컬 상태: 특정 컴포넌트 안에서만 관리되는 상태
• 전역 상태: 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

• 데이터 무결성: 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어 안정성을 저해하는 요소를 막고 데이터 상태를 항상 옳게 유지하는 것. Single source of truth, 동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다.

Redux

• 데이터 무결성을 위해 전역 상태를 관리해야 할 필요가 있다.
  • 이를 위한 툴로 React Context, Redux, Mobx 등이 있다. 이것들은 전역 상태 저장소를 제공하며 Props drilling 이슈를 해결하게 도와준다.

 

2. Props Drilling

Props Drilling

• Props Drilling: 상위 컴포넌트의 state를 props를 통해, 전달하고자 하는 컴포넌트로 전달하기 위해, 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트를 거치면서 데이터를 전달하는 현상
• 이는 여러 문제점을 야기한다.
  • 코드의 가독성이 나빠짐
  • 코드의 유지보수가 힘들어짐
  • State 변경 시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생하기 때문에 웹성능에 악영향을 줄 수 있음.
• 이를 해결하기 위한 방법들은 다음과 같다.
  • 컴포넌트와 관련있는 state를 가능한 가까이 유지한다.
  • 상태관리 라이브러리(Redux, Context api, Mobx, Recoil 등)를 이용한다.

 

---

참고

- https://ko.reactjs.org/docs/thinking-in-react.html

- https://www.voxco.com/blog/single-source-of-truth-definition-benefits-and-implementation/

- https://ko.redux.js.org/