[Redux] 2. 리덕스 설치 및 예제 실행

리덕스 설치하는 방법

먼저, cmd에 다음과 같은 명령어를 입력해 새로운 프로젝트를 생성한다.

$ npx create-react-app practice-redux

이후 생성된 디렉터리에 redux 라이브러리를 설치한다.

$ cd practice-redux
$ yarn add redux

리덕스 사용해보기

practice-redux 디렉토리의 src 폴더에 exercise.js 파일을 생성한 후 

해당 파일에 'Hello!'를 출력하는 console문을 작성한다.

exercise.js

console.log('Hello!');

 

이후 index.js에서 다음과 같이 exercise 파일을 불러온다.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import './exercise';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

그 후 터미널에서 다음과 같은 명령어를 입력해 개발서버를 실행한다.

yarn start

브라우저에서 개발자 도구를 열어보면 다음과 같이 콘솔창에 Hello!가 출력되는 것을 확인할 수 있다.

콘솔창 출력 결과

이제 본격적으로 리덕스 예제를 작성해보자!!

아래에서 작성하는 모든 코드는 exercise.js에 작성한다.

 

먼저, redux 라이브러리의 createStore 함수를 import 한다.

import {createStore} from 'redux';

createStore 함수는 스토어를 만들어주는 함수이다.

리액트 프로젝트에서는 단 하나의 스토어만 만든다.

 

이후, 리덕스에서 관리할 상태를 정의한다.

const initialState = {
    counter: 0,
    text: '야호',
    list: []
};

 

액션 타입을 정의해준다.

액션 타입은 주로 대문자로 작성한다

const INCREASE = 'INCREASE';
const DECREASE = 'DECREASE';
const CHANGE_TEXT = 'CHANGE_TEXT';
const ADD_TO_LIST = 'ADD_TO_LIST';

 

이제 액션 생성함수를 정의해줄 차례다!

액션 생성함수는 주로 camelCase로 작성해준다

const increase = () => ({
    type: INCREASE
});

const decrease = () => ({
    type: DECREASE
});

const changeText = text => ({
    type: CHANGE_TEXT,
    text
});

const addToList = item => ({
    type: ADD_TO_LIST,
    item
});

액션 객체에 type값은 필수라는 것을 잊지말자. 또한, 액션 안에는 type 외에 추가적인 필드를 마음대로 넣을 수 있다.

일반 함수 타입으로 작성할 수도 있지만 화살표 함수로 작성하면 더욱 코드가 간단해진다.

 

이제 리듀서를 만들 차례다.

위에서 만든 액션 생성함수들을 통해 만들어진 객체들을 참조해 새로운 상태를 만드는 함수를 작성해보자.

리듀서에서는 불변성을 지켜줘야 한다는 사실을 잊지 말자!

function reducer(state = initialState, action) {
    switch(action.type) {
        case INCREASE:
            return {
                ...state,
                counter: state.counter + 1
            };
        case DECREASE:
            return {
                ...state,
                counter: state.counter - 1
            };
        case CHANGE_TEXT:
            return {
                ...state,
                text: action.text
            };
        case ADD_TO_LIST:
            return {
                ...state,
                list: state.list.concat(action.item)
            };
        default:
            return state;
    }
}

reducer의 파라미터로 들어온 state는 초기값을 initialState로 지정해준다.

 

이제 스토어를 만들어줄 차례다.

const store = createStore(reducer);

 

다음으로 listener 함수를 작성해준다.

listener 함수는 스토어 내의 상태가 바뀔 때마다 호출되는 함수다.

const listener = () => {
    const state = store.getState();
    console.log(state);
}

 

마지막으로 생성해놓은 action들을 dispatch해보자

store.dispatch(increase());
store.dispatch(decrease());
store.dispatch(changeText('안녕하세요'));
store.dispatch(addToList({ id: 1, text: '와우' }));

코드 작성은 여기까지가 끝!

브라우저에서 console창을 확인해보면 state가 변경될 때마다 다음과 같이 console창에 출력되는 것을 확인할 수 있다

 

참고

벨로퍼트와 함께하는 모던 리액트 https://react.vlpt.us/redux/03-prepare.html