[React Redux] React Redux와 Redux Toolkit - (1)

React Redux란?

React Redux란 상태 관리 라이브러리 중 하나로써, 자바스크립트 환경이라면 어디서든 사용할 수 있는 Redux를 리액트 환경에서 사용할 수 있게 해주는 라이브러리이다. 즉, 리액트 리덕스를 통해 컴포넌트들은 store로부터 데이터를 읽고 쓸 수 있게 된다.

장점

• 반복적인 코드를 줄여준다 리덕스를 사용할 때 UI와 결합을 하기 위해선 기본적으로 반복해야 하는 과정이 존재한다.

  1. 리덕스 store를 만든다.
  2. 업데이트 발생을 subscribe한다.
  3. 구독 콜백 내부에선 현재 store의 상태에서 업데이트에 필요한 데이터를 가져와 UI를 업데이트 한다.
  4. UI를 initial state로 렌더한다.
  5. action을 정의하고 dispatch하여 UI의 변화에 반응하도록 한다.

  이 과정을 반복하는 것은 굉장히 피곤할 수 있는데, 리액트 리덕스는 이를 생략할 수 있도록 해준다.

• 성능 최적화에 도움이 된다. 다양한 컴포넌트들이 같은 스토어에 대해 구독 중이라면 업데이트가 발생 했을 때 그 컴포넌트들은 재렌더가 이루어지게 된다. 이 때 실제로 UI상에서 변화가 없는 컴포넌트들 마저도 업데이트가 발생할 수 있는데, 리액트 리덕스는 이를 판단하여 자동적으로 재렌더가 필요한 컴포넌트만 재렌더 해줌으로써 성능적인 낭비를 방지해 준다.

• 커뮤니티 형성이 잘 되어 있다. 우선 리액트 리덕스는 리덕스 제작팀의 공식적인 라이브러리로써 직접 관리하고 업데이트 한다. 즉, 리덕스가 업데이트 되면 리액트 리덕스 또한 이에 맞춰 발 빠르게 업데이트가 이루어지기 때문에 deprecate에 대해 걱정하지 않아도 된다는 것이다. 또한 리덕스가 오랜 시간 사랑 받아 왔던 만큼, 개발자들 간의 정보 교류도 활발하고 관련 정보들도 많기 때문에 에러나 버그에 대해 검색을 하면 쉽게 찾을 수 있다.

Redux Toolkit이란?

리덕스는 단독으로도 사용할 수 있지만, Redux Toolkit이라는 패키지와 함께 사용하면 훨씬 편리하게 코드를 작성할 수 있다. 리액트 툴킷은 복잡한 리덕스 스토어 설정, 리덕스를 효율적으로 사용하기 위한 여러 패키지 설치, 그리고 리덕스를 사용할 환경을 구축하는 보일러플레이트(상용구) 작성 등의 과정을 생략할 수 있게 해준다. 즉, 리덕스를 사용하기 위한 복잡한 사전 준비 과정은 툴킷이 전부 표준화를 해주고, 개발자는 리덕스를 활용한 코드를 작성하는 것에만 집중하면 된다는 의미이다.

참고: React Redux 공식 문서
참고: Redux Toolkit 공식 문서