React + Redux(Redux-toolkit) + Redux-saga

현재 개인 프로젝트로 React와 Redux, Redux-saga를 이용해 개발 중이다. 그래서 각각 어떤 이유로 이용했는지 정리하고자 글을 적어본다.

 

 

#. React

리액트는 기능 단위, UI 단위로 캡슐화하여 코드를 관리하기 때문에 재사용성이 높다. 또한 Virtual DOM을 통해 이벤트 발생 시 실제 DOM과 변경사항을 비교하여 변경된 부분만 재랜더링한다. 따라서 데이터가 변경되었을 때 효율적으로 랜더링을 수행할 수 있어 상호작용이 많은 UI라도 사용자에게 좋은 퍼포먼스를 제공할 수 있다.

#. Redux / Redux-toolkit

리액트는 단방향으로 데이터를 전달할 수 있기 때문에 컴포넌트 구조가 복잡할수록 데이터를 추적하고 관리하는데 어려움이 발생한다(*Props Drilling 이슈). 이때 리덕스는 상태 값을 컴포넌트 바깥에서 더 효율적으로 관리할 수 있도록 해준다. 리덕스를 통해 여러 컴포넌트를 거치지 않고 쉽게 상태값을 전달하거나 업데이트를 할 수 있으며, 기존의 컴포넌트에서 상태 관련 로직을 다른 파일로 분리시킬 수 있다. 그리고 리덕스 툴킷으로 보다 복잡한 리덕스 설정과 반복되는 코드를 줄여 간편화하였다.

 

#. Redux-saga 

현재 개발 중인 프로젝트는 외부 API를 통해 받은 데이터를 DB에 저장하여 필요한 데이터를 가져와 보여주는 구조이다. 그래서 컴포넌트에서 비동기 작업이 빈번하게 일어나 이러한 부수적인 작업을 따로 처리하기 위해 리덕스 사가를 이용하였다. 리덕스 사가는 리덕스의 action이 발생하면 reducer가 액션을 처리하기 전에 여러 작업을 할 수 있도록 미들웨어 역할을 해준다.