[Redux] 왜 Redux인가? (Redux를 사용하는 이유)

들어가기에 앞서..

본 글에서 정확하지 않은 내용이 있다면
댓글이나 방명록 등을 통해서 알려주면 감사하겠습니다.
(아래부터는 편의상 반말로 진행합니다)

0. React에서의 전역상태관리는 무엇이고, 왜 필요한가?

전역 상태(Global State)란?

• 전역 상태라는 말 그대로, 앱 내부의 어느 곳에서나 참조할 수 있는 state를 뜻한다.

전역 상태 / 전역상태관리가 필요한 이유?

• 여러 컴포넌트, 렌더링에 영향을 미치는 크로스 컴포넌트 상태나
  앱 전역에 영향을 미치는 상태가 있을 경우 해당 상태를 참조할 수 있도록 해야함
• React 내부에서 state(data, argument, method ... etc)를 전달할때에는
  반드시 부모에서 자식에게 props를 통해 전달하도록 설계되어 있다.
• props를 통해서 전달을 해야하다 보니
  중간과정에서 의미없는 props 전달만 하는 일이 생길 수 있다는 문제가 있었고,
  (전달을 위한 리소스가 낭비되는 것)
  이 부분을 props drilling이라고 표현하기도 한다.
• 이를 해결하기 위한 대안이 전역에서 참조할 수 있는 상태를 만드는 것이다.
  (Props drilling 없이 참조할 수 있는 Context API 같은 기능이용)

---

1. 전역상태관리 도구

Context API - 참조

• react에 내장된 전역상태관리 도구로 사용이 간편하다.
  createContext릍 통해 전역상태를 생성하고
  Context.Provider를 통해 해당하는 상태를 props없이 참조하도록 할 수 있다.
  사용할 컴포넌트 내에서 useContext 훅을 통해 참조하여 사용이 가능하다.

Redux - 참조 / 번역본

• redux는 기본적으로 JavaScript를 사용하는 프로젝트에서
  사용할 수 있도록 만든 전역상태관리를 위한 라이브러리이다.
• react에서 사용하는 것은 react에 특화되어 있는 react-redux이다.
  react-redux를 통해 react hook 등을 사용하여 더 편리하게 redux를 사용할 수 있다.

---

[이미지출처] https://velog.io/@cada/React-Redux-vs-Context-API(클릭시 이동)

2. React-Redux VS Context API (왜 react-redux를 사용해야 하는가?)

Context API를 사용했을때 일어날 수 있는 문제들

• 세팅과 관리의 복잡성이 증가할 위험이 있다.
  (Provider 증가 등으로 인한 다수의 Provider 중첩)
• 하나의 Provider로 전역상태관리를 사용할 경우, Provider가 감당해야 할 상태가 많아질 수 있음
• 데이터가 자주 변경되는 상태에 대한 성능 이슈가 발생할 수 있음

React-Redux를 사용하면 위와 같은 문제들을 해결 할 수 있다

---

3. 결론

꼭 Redux일 필요도 없다

• 단순하거나 가벼운 기능을 사용하는 애플리케이션일 경우
  Redux를 사용하면 코드작성이나 관리 측면에서 더 부담이 생길 수 있음
• 단순히 전역상태를 관리하는 경우나
  데이터가 자주 변경되지 않는 상태에 대해서는 Context API도 제기능을 충실히 함

항상 어떤 도구를 사용하더라도,
상황과 여건에 맞추어 사용하려는 노력이 필요하다고 생각한다.

 

문제를 해결했을 때 나오는 정답은 있어도,
문제를 해결하는 방법에는 정답이나 정도가 없다는 생각이 든다.