필자가 redux를 사용하게 된 계기
현재 사이드 프로젝트를 진행하며 처음으로 react를 사용하게 되었다.
진행도가 깊어짐에 따라 부모와 자식 컴포넌트 간에 데이터 전달이 깊어졌다.
자식 > 자식 > 자식 > ... 이 반복
"이 props 는 어디서부터 온 것일까?"
"넌 어디서 왔니..?"
슬슬 상태관리 라이브러리의 필요성을 느꼈다.
듣기로도 props의 전달이 두번 이상 이루어질 때 좋은 코드라 할 수 없다고 했다.
맞아보니 정신이 들었다.
마침 우리 프로젝트에 디자이너님께서 합류하셨고,
새로운 디자인에 대해 컴포넌트들을 대청소를 할 타이밍이 생겼다.
이 때다 싶어 redux 를 배우고 사용에 옮겨보려고 한다.
redux의 사용 이유
useState 를 사용할 때에 컴포넌트 내에 state를 선언한다.
setState() 함수를 통해 state 를 변경시키며 변경된 state 가 존재하는 컴포넌트가 리렌더링(re-rendering) 된다.
이 처럼 state 는 컴포넌트에 종속되어 관리된다.
하지만 redux 는 컴포넌트에 종속되어 있지 않고 밖에서 관리된다고 한다!
redux 의 store 는 프로젝트 최상단에 위치하여 import 된 컴포넌트에 대해 state 를 관리할 수 있다고 한다.
store : 이름 그대로 state 가 모여있는 state 상점 !
redux 의 기본 원리
redux 는 flux 패턴을 따른다고 한다. flux 가 무엇인지부터 알아보자!
flux 패턴이란 ?
flux 란 애플리케이션의 데이터 흐름을 관리하는 패턴을 말한다. 중요한 것은 데이터의 흐름이 단방향으로 흐른다는 것이다.
사용자가 뷰와 상호작용할 때 뷰는 애플리케이션의 데이터와 비즈니스로직(?)을 가지고 있는 스토어들에게 액션을 디스패쳐를 통해 전파한다. 그러면 스토어는 액션을 통해 데이터를 변경하고 데이터를 변경한 것이 뷰에게 반영이 된다.
flux 를 사용하는 이유
-예측가능성을 높여준다.
-데이터의 일관성을 유지하기 쉽게 만들어준다.
-버그를 발견하기 쉽게 해준다.
-테스트를 쉽게해준다.
flux 의 구조
dispatcher - store - action - view
dispatcher
dispatcher 는 액션들을 받아서 해당 디스패처를 등록한 store에게 전달하는 역할을 한다.
한 애플리케이션은 싱글턴(?) dispatcher를 갖고 있어야한다.
싱글턴(singleton) : 오직하나의 객체만을 생성할 수 있는 클래스 따라서 싱글턴 패턴을 사용하면 쉽게 객체의 유일성을 보장할 수 있다.
dispatcher 를 사용하는 이유
애플리케이션이 커지면서 store끼리 의존성이 생길 수 있다. 만약에
store A는store B가 업데이트 된 이후에 뭔가를 처리해야한다면 dispatcher가 waitFor() 같은 메서드를 통해 중재해준다.
Store
스토어는 애플리케이션의 데이터를 가지고 가지고 있다. 스토어는 액션들을 받기 위해서 애플리케이션의 디스패처를 등록한다. 스토어에 저장된 데이터는 오직 액션에 의해서만 변경이 되어야 한다. 그래서 공개적으로는 setter들은 존재하지 않고 오직 getter들만 있게 된다.
스토어는 받은 액션을 어떻게 처리할지를 결정합니다. 그리고 스토어의 데이터가 변할 때마다 change이벤트를 만들어야 한다. 이러한 스토어는 애플리케이션에 여러 개가 존재할 수 있다.
action
액션은 애플리케이션 내부의 API를 정의한다. 액션들은 애플리케이션과 어떻게 상호작용할지를 결정한다.
액션은 간단한 오브젝트인데 type이라는 필드와 데이터를 가지고 있다.
액션들은 의미를 드러내야 하고, 액션이 발생한 곳을 설명할 수 있어야 하지만 상세한 구현에 대해서는 묘사하지 않도록 구현해야 한다. 예를 들어 유저를 삭제할 경우 delete-user를 사용하는 것이 delete-user-id를 사용하는 것보다 더 낫다.
view
스토어의 데이터는 뷰를 통해 보여진다. 뷰는 어떤 프레임워크를 사용하든 상관이 없다. 뷰가 스토어의 데이터를 사용할 때는 반드시 스토어의 change이벤트도 같이 구독해야 한다. 스토어가 이벤트를 발행할 때 뷰는 새로운 데이터를 받을 수 있고 다시 렌더링하게 된다. 만약에 컴포넌트가 스토어를 사용하지만 이벤트를 구독하지 않는다면 문제가 발생할 수 있다.
액션들은 주로 사용자가 뷰와 인터랙션 할때 뷰에서부터 발생한다.
flux의 다이어그램
action -> dispatcher -> store -> view
view -> action -> dispatcher -> store -> view
view는 dispatcher 에게 action을 보낸다.
dispatcher 는 모든 store에게 action 을 보낸다
store 는 view 에게 데이터를 전송한다.
redux 설치
yarn add redux react-redux redux-devtools-extension redux-logger
redux-devtools-extension: 크롬 확장 프로그램에서redux dev tools를 통해 설치 redux 의 데이터 흐름을 알아보기 쉽게 한다.
redux-logger: redux를 통해 바뀔 이전 state, dispatch 실행으로 인해 바뀐 state 가 콘솔에 찍혀 디버깅을 쉽게 해주는 라이브러리
