리액트 애플리케이션을 리덕스를 사용해서 관리를 하게 되면, 컴포넌트 파일과 별개로 상태업데이트 모듈을 관리 할 수 있기 때문에 유지보수에 좋습니다.
가장 많이 사용하는 리덕스 패턴은
- 프레젠테이셔널 컴포넌트
- 컨테이너 컴포넌트
이 두가지로 분리 해서 사용하는 패턴입니다.
프레젠테이셔널 컴포넌트는 컨테이너 컴포넌트로 부터 props를 받아와 UI에 보여주는 역할을 합니다.
컨테이너 컴포넌트는 리덕스와 연동이 되어있어 상태를 받아오거나, 액션을 디스패치하는 역할을 합니다.
리듀스 코드 작성하기
리덕스를 사용하기 위해서는 액션타입, 액션 생성 함수, 리듀서 코드를 작성해야 합니다.
코드를 작성하기 위해 파일을 생성하는 두가지 방식이 있습니다.
* 1. 일반적인 방식
리덕스 공식문서에 나와있는 기본적인 방식입니다.
actions, constants, reduces 폴더를 생성해 기능을 구현합니다.
* 2. Ducks 패턴 방식
액션 함수 , 액션 타입, 리듀서를 하나의 파일에 작성하는 방식입니다.
moduels(이름은 편의에 맞게 변경 가능) 폴더를 생성해 기능을 구현합니다.
* 리덕스 코드 작성 방법
modules폴더에서 리덕스 코드는 다음과 같은 순서로 작성합니다.
1. 액션 타입 설정
2. 액션 함수 설정 (액션 함수는 export를 사용)
3. 초기값 설정 및 리듀서 코드 작성
4. 리듀서 코드 export default
modules폴더에서 리듀서 코드를 작성하고 난 뒤에는 루트 리듀서를 만들어야 합니다.
스토어를 만들때는 하나의 리듀서만 사용해야 하기 때문입니다.
따라서 다른 파일에 선언한 리듀서는 루트 리듀서에 불러와 결합을 시켜야 합니다.
그때 사용하는 함수는 combindeReducer입니다.
* 루트 리듀서 코드 작성 예시
import { combineReducers } from 'redux'; import Counter from './리듀서파일이름1'; import Todo from './리듀서파일이름2'; //리듀서 결합 함수 작성 const rootReducer = combineReducers({ Counter, Todo }); export default rootReducer;
* export, export default의 차이점
export를 사용하여 모듈을 내보낼 경우 여러개를 할 수 있지만
export default를 사용하면 하나만 내보낼 수 있습니다.
* store를 사용하기 위한 설정
리덕스 스토어를 사용하기 위해 src/index.js에 다음과 같이 설정 해줍니다.
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { createStore } from 'redux'; import rootReducer from './moduels'; import { Provider } from 'react-redux';//리액트 컴포넌트에서 스토어를 사용할 수 있도록 Provider로 감싸줌 const store = createStore(rootReducer);//리덕스 스토어 생성 //Provider로 컴포넌트를 감싸고 store를 props로 전달해줍니다. ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );
Redux DevTools의 설치 및 적용
크롬 웹에서 리덕스 개발자 도구인 Redux DevTools를 사용하기 위해 패키지를 설치 합니다.
경로> npm add redux-devtools-extensoion
src/index.js 파일을 다음과 같이 변경해줍니다.
import { composeWithDevTools } from 'redux-devtools-extension'; const store = createStore(rootReducer, composeWithDevTools);//리덕스 스토어 생성
참고자료
리액트를 다루는 기술
