[Redux] 4. 리덕스로 카운터 구현하기

리덕스를 이용해 카운터 기능을 구현해보자.

프리젠테이셔널 컴포넌트 만들기

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

src 디렉터리에 components 디렉터리를 만들고, 그 안에 Counter.js를 생성한 뒤에 다음과 같이 코드를 작성한다.

Counter.js

import React from 'react';

function Counter({ number, diff, onIncrease, onDecrease, onSetDiff }) {
    const onChange = e => {
        onSetDiff(parseInt(e.target.value, 10));
    };
    return (
        <div>
            <h1>{number}</h1>
            <div>
                <input type="number" value={diff} min="1" onChange={onChange} />
                <button onClick={onIncrease}>+</button>
                <button onClick={onDecrease}>-</button>
            </div>
        </div>
    )
}

export default Counter;

프리젠테이셔널 컴포넌트에선 주로 UI를 선언하는 것에 집중한다. 필요한 값들이나 함수는 props로 받아와서 사용하는 형태로 구현한다.

컨테이너 컴포넌트 만들기

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

또한, HTML 태그들을 사용하지 않고 다른 프리젠테이셔널 컴포넌트들을 불러와서 사용한다.

src 디렉터리에 containers 디렉터리를 만들고 CounterContainer.js 파일을 만들어보자.

CounterContainer.js

import React from 'React';
import { useSelector, useDispatch } from 'react-redux';
import Counter from '../components/Counter';
import { increase, decrease, setDiff } from './modules/counter';

function CounterContainer() {
	
    // useSelector는 리덕스 스토어의 상태를 조회하는 Hook이다.
    const { number, diff } = useSelector(state => ({
        number: state.counter.number,
        diff: state.counter.diff
    }));

	
    // useDispatch는 리덕스 스토어의 dispatch를 함수에서 사용할 수 있게 해주는 Hook이다.
    const dispatch = useDispatch();
    const onIncrease = () => dispatch(increase());
    const onDecrease = () => dispatch(decrease());
    const onSetDiff = diff => dispatch(setDiff(diff));

    return (
    	// 상태와 액션을 디스패치하는 함수들을 props로 넣어준다.
        <Counter
            number={number}
            diff={diff}
            onIncrease={onIncrease}
            onDecrease={onDecrease}
            onSetDiff={onSetDiff}
        />
    );
}

export default CounterContainer;

 

이제 App 컴포넌트에서 CounterContainer를 렌더링 해보자.

App.js

import React from 'react';
import CounterContainer from './containers/CounterContainer';

function App() {
  return (
    <div>
      <CounterContainer />
    </div>
  );
}

export default App;

결과 화면

입력창에 값을 입력하고 버튼을 클릭하면 해당 값에 대한 덧셈, 뺄셈이 진행되는 것을 확인할 수 있다

 

참고

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