[React]Redux란

React 상태관리 라이브러리

Redux가 뭘까

Redux는 Flux개념을 바탕으로한 React에서 현재 가장 많이 사용되는 State관리 라이브러리.

• 2020-08-07 현재 기준 npm Weekly Downloads : 6,289,908)

State : React Component에서 변경가능한 데이터
Flux : https://haruair.github.io/flux/docs/overview.html

React는 React컴포넌트에서 개별적으로 state를 관리한다. 그러나 Redux를 사용하면 state를 별도의 전용 장소인 store에서 상태를 관리하고 React Component에서는 그걸 보여주기만 하는 용도로 사용한다.

Redux 장점

장점 1. 상태의 중앙화

앞에서 말한것과 같이 Redux는 store를 통해 상태를 한 곳에서 관리하는데 이것을 "상태의 중앙화"라고 한다. 상태의 중앙화로 다음과 같은 이점을 얻을 수 있다.

• 웹사이트의 상태를 어디서 관리할지 고민하지 않아도 된다.
  • 사용자의 상태를 관리할 때 사용자의 상태를 상단 바에도 출력하고 메인 페이지에도 출력해야 할 때 상태를 전역변수나 props를 통해 관리하지 않고 store에서 관리하면 된다.
• state를 쉽게 저장하고 불러올 수 있다.
  • 다시 사용자의 상태를 예로 들면 사용자의 정보가 여기저기 흩어져있으면 각 상태마다 저장 기능을 구현해야 한다. 하지만 상태를 모두 store에서만 관리하게 되면서 상태를 한 군데만 저장해서 관리하면 된다.

장점 2. 읽기 전용 상태

Rudux는 상태를 읽기 전용으로 취급한다. 상태를 변경하기 위해서는 상태 일부를 변경하는 것이 아니라 상태 전체를 변경해야 한다. 이로 인해 다음과 같은 이점을 얻을 수 있다.

• 상태가 읽기 전용이므로, 이전 상태로 돌아가기 위해서는 이전 상태를 현재 상태에 덮어쓰기만 하면 된다. 실제로 Rudux는 Rudex Undo라이브러리를 통해 실행 취소 기능을 제공한다.

장점 3. Reducer

Redux는 상태를 변경하는 도중 부수 효과(side effect)가 일어나지 않도록 코딩하기를 권장한다. 이와 함께 상태를 변경하려는 시도를 복제 저장, 전송할 수 있도록 자바스크립트 객체 형태로 구성하기를 강제한다. 이 때 부수 효과 없이 상태를 변경하는 함수를 Reducer라고 하며, 상태 변경을 어떻게 할 것인지 정보를 담은 자바스크립트 객체를 Action이라고 한다.

부수효과(side effect) : 함수가 실행될 때 매개변수가 아닌 다른 값에 따라 반환값이 바뀌는 것.

Reducer와 Action을 통해 다음과 같은 이점을 얻을 수 있다.

• Action만 가지고 상태가 어떻게 변화할지 완벽하게 예상할 수 있다.
• Action의 일부를 제외하고 다시 실행하더라도 어떤 일이 벌어질지 예상하기 쉽다.

Redux 단점

단점 1. 러닝 커브

React를 배우고 Readux를 배우기 시작하면 러닝커브가 높아진다. 이에 재밌는 글이 있어 공유한다.

• 리액트(ReactJS) 개발자가 걷게 되는 길

단점 2. Redux가 개발자를 제약할 수 있다.

Redux는 일반적인 라이브러리나 프레임워크가 아니다. 리덕스만의 설계 철학과 함께 철학을 쉽게 따를 수 있도록 여러 도구를 지원해주는 개발도구다. 설계 철학을 따른다는 것은 그냥 라이브러리를 사용하는 것과는 완전히 다른 문제다.
Redux를 사용함으로 인해 여러가지 강력한 장점을 얻을 수 있다. 하지만 Redux의 철학이 강제하는 방식으로 인해 오히려 코드가 복잡해지거나 코드를 작성하기 어려워질 수도 있다. Redux 탄생 배경을 이해하고 Redux가 제공하는 여러 장점이 필요한 상황이 아니라면 다른 라이브러리나 프레임워크를 사용하는 것이 더 나을수도 있다.