[React.js Hook] useReducer 알아보기, 실습

안녕하세요 까치입니다.

오늘은 React Hook인 useReducer에 대해 알아보겠습니다.
practicePage 폴더를 생성하여 그 아래  counter라는 파일을
하나 만들어  아래 와 같은 counter소스를 구현해 
보았습니다.

 

 //초기값 셋팅
const [ state , dispatch ] = useReducer(reducer, { value : 0} );

Reducer는 처음으로 초기값을 셋팅하며, 
그 초기값에 reducer 라는 함수와 {value:0}라는 객체
를 초기값으로 셋팅합니다.

return(
<div>
	<p><b>현재 카운트 = {state.value}</b></p>
	<p><b>총누른 횟수 = {state.totalClickNum}</b></p>
	<button onClick={increment}> +1</button>
	<button onClick={decrement}> -1</button>
</div>
);

그리고 버튼을 누를때 increment라는 함수를 호출 하는데 
그 함수안에 또한번 dispatch라는 함수를 호출하게 되고,

    //증가 함수
    const increment = () => {
        dispatch( { type : 'INCREMENT' });
    }
    //감소 함수
    const decrement = () => {
        dispatch( { type : 'DECREMENT' });
    }

 

 

dispatch 함수를 호출 하면  초깃값에 설정 되어있는

reducer함수를 호출 하게되며 {type:'INCREMENT'}

라는 action 객체를 활용하여 type 값에 

switch로 'INCREMENT'를 찾아 변수 값을 업데이트 

해주는 형식입니다.

 

function reducer (state, action ){
    switch (action.type) {
        case 'INCREMENT':
            return { value : state.value + 1};
        case 'DECREMENT':
            return { value : state.value - 1};
        default:
            return state;
    }
}

 

위에 구조는 useState구조랑 동일 하나 들어가는 
객체의 형태가 다르다고 보시면 됩니다.

useState는 
const [name, setName] = useState('');
setName('이름');
{name}
형태로 데이터를 관리 합니다.

 

useReducer는 string형태를 넣는것이 아니라 
const [state,dispatch] = useReducer(reducer, {value:0});
dispatch({type : 'INCREMENT'});
reducer ( state, {type:'INCREMENT'}){
  switch에서 type이 'INCREMENT'를 찾아 
  return 
}
state +1 이 작동 하는 형식 이라고 보면 됩니다.

 

useState랑 useReducer가 다른점은

useState = string 값을

useReducer = 함수, 오브젝트 객체

를 인수로 넣어 const값을 설정 할 수 있다는 겁니다.

 

이것은 javascript는 OOP 구조 이기 때문에 객체를 넣든 

함수를 넣든 이런 문법이 가능합니다.
저도 처음에는 이해하는데 조금 어려웠습니다.

이것을 변형 하면 여러개 내용을 이용하여 
변경할수도 있습니다.

 

import React, { useReducer } from 'react';

function reducer (state, action ){
    switch (action.type) {
        case 'INCREMENT':
            return { 
                value : state.value + 1,
                totalClickNum : state.totalClickNum + 1
            };
        case 'DECREMENT':
            return { 
                value : state.value - 1,
                totalClickNum : state.totalClickNum + 1
            };
        default:
            return state;
    }
}

const Counter = () => {
    //초기값 셋팅
    const [ state , dispatch ] = useReducer(
         reducer, 
         { 
            value : 0,
            totalClickNum : 0
         } 
    );
    //증가 함수
    const increment = () => {
        dispatch( { type : 'INCREMENT' });
    }
    //감소 함수
    const decrement = () => {
        dispatch( { type : 'DECREMENT' });
    }
 
    return(
        <div>
            <p><b>현재 카운트 = {state.value}</b></p>
            <p><b>총누른 횟수 = {state.totalClickNum}</b></p>
            <button onClick={increment}> +1</button>
            <button onClick={decrement}> -1</button>
        </div>
    );
}

export default Counter;

 

이런식으로 객체를 초깃값에 셋팅할때 

두개를 넣어 설정하는 것 또한 가능하며 

함수를 넣는것도 가능합니다. 이건 

머리를 많이 써야 할 것 같긴하지만요

 

암튼 위에 내용을 화면에 띄워서 

설정 해 보면

최종적으로 이렇게 화면을 구성 할 수 있게 됩니다.

reducer는 react redux 에서 정말 중요한 개념이기 

때문에 꼭 이해 하시고 넘어가시기 바랍니다.