Section3 / Unit4 : 상태 관리, props drilling

CodeStates/React

yeeendy 2023. 6. 20. 22:52

이번 단원에서는 redux에 대해 배운다!

본격적인 redux 공부 전에 상태 관리에 대한 개념과 상태 관리 라이브러리(Redux)의 필요성에 대해 먼저 알아보자

프론트엔드 개발에서의 상태 관리

상태란?

→ UI에 동적으로 표현될 데이터

Side Effect란?

→ 함수(또는 컴포넌트)의 입력 외에도 함수의 결과에 영향을 미치는 요인

→ ex) 네트워크 요청(백엔드 API 요청)

React의 주요 개발 원칙 중 하나는 UI를 페이지 단위가 아닌 컴포넌트 단위로 보는 것

상태의 두 가지 구분

전역 변수는 남용하는 것이 좋지 않지만, 경우에 따라 필요하다

→ 서로 다른 컴포넌트가 사용하는 상태의 종류가 다르면 → 전역 상태 필요 X (출처가 달라도 됨)

→ 서로 다른 컴포넌트가 동일한 상태를 다룬다면, 출처는 오직 한 곳이어야 함(전역 공간)

전역 상태에서의 데이터 무결성

→ 데이터의 정확성을 보장하기 위해 데이터의 변경이나 수정 시 제한을 두어

안정성을 저해하는 요소를 막고 데이터 상태들을 항상 옳게 유지하는 것

Single source of truth
동일한 데이터는 항상 같은 곳에서 데이터를 가지고 온다

상태 관리를 위한 각종 툴

→ 전역 상태 저장소 제공

→ Props drilling 이슈 해결

props를 오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서

React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정

props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling은 큰 문제가 되지 않는다.

하지만 규모가 커지고 구조가 복잡해지면서 props의 전달 과정이 늘어난다면 문제가 발생한다.