리덕스(Redux)는 Flux archiecture를 만드는 '상태관리' 라이브러리이다.
컴포넌트끼리 데이터 및 스테이트 관리를 쉽고 효율적으로 해줄 수 있게 만들어준다.
우선 간략하게 MVC에 대해 알아보자.
MVC는 Model View Controller의 약자로 애플리케이션을 세 가지의 역할로 구분한 개발 방법론이다.
사용자가 Controller를 조작하면, Controller는 Model을 통해서 데이터를 가져오고 그 정보를 바탕으로 View가 시각적 표현을 담당해서 사용자에게 전달해 준다.
React는 MVC를 모두 담당하는 Angular와 Vue와 달리 오직 View를 담당하고 있다.
프로젝트의 규모가 작을 때에는 부모 컴포넌트(ex. APP.js)가 중간자 역할을 해주는 것에 아무런 지장이 없지만, 컴포넌트의 개수와 다뤄야할 데이터가 늘어나면 부모 컴포넌트를 관리하기도 힘들어진다.
리덕스는 이러한 상태들을 컴포넌트 바깥에서 관리하게 도와준다. 그림으로 한번 알아보자.
왼쪽이 일반 리액트의 상태관리로, 어떠한 값을 변경하고 싶다면 자식 컴포넌트에서 계속 타고 올라가 부모 컴포넌트까지 가야 한다.
하지만 오른쪽의 경우, 리덕스가 Store라는 곳에서 상태 변화를 감지하고 이를 각 컴포넌트에게 알려준다.
다음 글에서 더 자세하게 알아보자.