CodeStates/React
Section3 / Unit4 : 상태 관리, props drilling
yeeendy
2023. 6. 20. 22:52
이번 단원에서는 redux에 대해 배운다!
본격적인 redux 공부 전에 상태 관리에 대한 개념과 상태 관리 라이브러리(Redux)의 필요성에 대해 먼저 알아보자
프론트엔드 개발에서의 상태 관리
상태란?
→ UI에 동적으로 표현될 데이터
Side Effect란?
→ 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인
→ ex) 네트워크 요청(백엔드 API 요청)
React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것
상태의 두 가지 구분
- 로컬 : 특정 컴포넌트 안에서만 관리되는 상태
- 전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태
전역 변수는 남용하는 것이 좋지 않지만, 경우에 따라 필요하다
→ 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 → 전역 상태 필요 X (출처가 달라도 됨)
→ 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 출처는 오직 한 곳이어야 함(전역 공간)
전역 상태에서의 데이터 무결성
→ 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어
안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것
Single source of truth
동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다
상태 관리를 위한 각종 툴
- React Context
- Redux
- MobX
→ 전역 상태 저장소 제공
→ Props drilling 이슈 해결
Props Drilling
props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서
React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정
Props Drilling의 문제점
props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않는다.
하지만 규모가 커지고 구조가 복잡해지면서 props의 전달 과정이 늘어난다면 문제가 발생한다.
- 코드의 가독성이 매우 나빠진다
- 코드의 유지보수 또한 힘들어짐
- state 변경 시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생
→ 웹성능에 악영향을 줄 수 있음