[TIL] Redux 예제 1. 카운터 구현하기

react logo

◎ 리덕스.. 어렵다..

처음 위코드에서 리덕스에 대해 배울 때 정말 이해가 안됬다.

프로젝트 진행할 때 리덕스 사용을 해봤지만.. 그래도 모르겠다.

그래서 다시 강의를 보면서 예제를 따라치며 내 것으로 만들기로 했다.

0. 설치

npm install redux
npm install react-redux
npm install redux-devtools-extension

1. 리덕스 모듈

◎ 리액트 프로젝트에서 리덕스 모듈 만드는 방법은 다양하다.

리덕스 모듈이란 액션 타입, 액션 생성 함수, 리듀서가 들어있는 자바스크립트 파일을 의미한다.

첫 번째 방식은, 액션과 리듀서가 서로 다른 파일로 만드는 법이다. 

● actions 폴더

 - index.js 파일

● reducers 폴더

 - index.js 파일

위처럼 서로 다른 파일에 분리가 되어있으면 개발을 하는데 불편하다고 해서 다른 방식으로 적용을 했다.

바로 Ducks 패턴이라고 부르는 방식인데 리듀서와 액션 관련 코드들을 하나의 파일에 몰아서 작성하는 방법이다.

나는 Ducks 패턴으로 리덕스를 배워보겠다.

2. counter 모듈 만들기

◎ 우선 modules 디렉터리를 만들고, 그 안에 counter.js 파일을 생성하고 코드를 작성하자. (각 코드에 대한 설명은 주석으로!)

 

modules/counter.js

3. 루트 리듀서 

◎ 한 프로젝트에 여러 개의 리듀서가 있을 때는 이를 한 리듀서로 합쳐서 사용하는데 이를 루트 리듀서라고 부른다.

리듀서를 합치는 작업은 리덕스에 내장되어 있는 combineReducers 함수를 사용한다.

 

modules/index.js

현재는 counter 리덕스 모듈밖에 없지만, 다른 리덕스 모듈을 만들면 루트 리듀서에 import 해주면 된다.

루트 리듀서를 만들었으면, 스토어를 만들어보자.

리덕스 스토어는 src 디렉터리의 index.js 에서 해주면 된다.

 

src/index.js

index.js 에서 추가되어야 할 코드를 적고 적용한다.

리액트 프로젝트에서 리덕스를 적용할 때에는 react-redux 라이브러리를 사용해야 한다.

리덕스 개발자 도구(composeWithDevTools)를 사용하면 현재 스토어의 상태를 개발자 도구에서 조회할 수 있고 지금까지 어떤 액션들이 디스패치 되었는지, 그리고 액션에 따라 상태가 어떻게 변했는지 확인할 수 있다. (아주 좋은 개발자 도구!!)

(크롬 웹 스토어에서 확장 프로그램을 설치해야 한다.)

 

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Redux DevTools

그리고 createStore의 두 번째 파리미터로 적용시킨다.

 

개발자 도구로 확인

 

index.js에서 Provider 컴포넌트를 불러와서 App 컴포넌트를 감싸주고 props에 store을 넣어준다.

4. 프리젠테이셔널 컴포넌트

◎ 프리젠테이셔널 컴포넌트란, 리덕스 스토어에 직접적으로 접근하지 않고 필요한 값을 props로 받아와서 사용하는 컴포넌트이다.

props를 통해 필요한 상태와 함수를 가져오고 이 컴포넌트에서는 주로 UI 선언에 집중을 한다.

 

components/Counter.js

5. 컨테이너 컴포넌트

◎ 컨테이너 컴포넌트란, 리덕스에 있는 상태를 조회하거나 액션을 디스패치 할 수 있는 컴포넌트를 의미한다.

여기서는 필요한 프리젠테이셔널 컴포넌트를 불러와서 사용해야 한다.

(자세한 설명은 주석으로!!)

 

containers/CounterContainer.js

 

6. 프리젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 관계

flow

7. App.js

◎ 마지막으로 App.js에서 CounterContainer를 렌더링 하자.

 

App.js

8. 결과

 

 

9. 느낀 점

◎ 세션 때 배웠던 방식이랑 달라서 헷갈렸는데, 둘 중 써보면서 나한테 맞는 방식으로 적용을 해야 할 거 같다.

처음보다는 이해가 되었지만 여전히 어렵다..

지금은 단순히 따라 치면서 이해를 해봤는데, 실제 프로젝트에 redux를 적용해보고 싶다.

redux는 어렵다! 하지만 정말 유용하게 쓰일 듯?!

※ 참조

- 벨로퍼트님의 리액트 강의 시청한 내용 정리 (강의 내용을 정리하느라 틀린 부분이 있으면 피드백 부탁드립니다!!)

 

https://github.com/erikras/ducks-modular-redux

erikras/ducks-modular-redux