React 상태관리

---

애플리케이션을 개발할 때 Redux를 사용하면 React 컴포넌트 간의 복잡한 데이터 흐름을 따라갈 필요가 없어진다. 특히 컴포넌트가 많아지고 애플리케이션의 구조가 고도화될수록 Redux를 활용한 상태 관리는 빛을 발한다.

상태관리란?

---

상태는 변하는 데이터이다. 특별히 UI, 프론트엔드 개발에서는 "동적으로 표현되는 데이터"를 의미한다.

side Effect란

---

상태를 다룰 때에 Side Effect는 주요 고려 대상이다.
먼저 Side Effect의 정의는 무엇인가요? 바로 "함수의 입력 외에도 함수의 결과에 영향을 미치는 요인"이다. 대표적으로 네트워크 요청, API 호출이 있다.

상태의 두가지 구분

---

• 로컬 : 특정 컴포넌트 안에서 관리되는 상태
• 전역 : 프로덕트 전체 혹은 여러 컴포넌트에서 관리되는 상태

Props Drilling이란?

---

Props Drilling은 상위 컴포넌트의 state를 props를 통해 전달하고자 하는 컴포넌트로 전달하기 위해 그 사이는 props를 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 데이터를 전달하는 현상을 의미한다.

Props Drilling의 문제점

---

Props의 전달 횟수가 5회 이내로 많지 않다면 Props Drilling 은 큰 문제가 되지 않지만, 규모가 커지고 구조가 복잡해지면서 Props의 전달 과정이 늘어난다면 아래와 같은 문제가 발생한다.

• 코드의 가독성이 매우 나빠지게 된다.
• 코드의 유지보수 또한 힘들어지게 된다.
• tate 변경시 Props 전달 과정에서 불필요하게 관여된 컴포넌트들 또한 리렌더링이 발생한다.
• 따라서, 웹성능에 악영향을 줄 수 있다.

Props Drilling의 해결방안

---

과도한 Props Drilling을 방지하기 위한 방법으로는 컴포넌트와 관련있는 state는 될 수 있으면 가까이 유지하는 방법과 상태관리 라이브러리를 사용하는 방법이 있다.태관리 라이브러리를 사용하게 되면 전역으로 관리하는 저장소에서 직접 state를 꺼내쓸 수 있기 때문에 Props Drilling을 방지하기에 매우 효과적이다.