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 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생
    → 웹성능에 악영향을 줄 수 있음