[useReducer] 여러 상태 값을 사용 한다면 useReducer

리듀서는 현재 상태, 액션 값을 전달받아 새로운 상태를 반환하는 함수이다.

 

리듀서 함수에서 새로운 상태를 만들 때 불변성을 꼭 지켜야 한다.

 

// 리듀서 함수
const reducer = (state, action) => {
	switch (action.type) {
    	case 'PLUS':
        	return { value : state.value + 1};
        case 'MINUS':
        	return { value : state.value - 1};
        defatul: 
        	return state;
    }
}

// 액션 값
{
	type : 'PLUS'
}

useReducer에서는 type이 없어도 되고 객체가 아니어도 된다.

 

사용법

const Counter = () => {
	const [state, dispatch] = useReducer(reducer, { value: 0 });
    
    return (
    	<div>
        	<p> 현재 값 : {state.value} </p>
            <button onClick={ () => dispatch({ type: 'PLUS' })}>+1</button>
            <button onClick={ () => dispatch({ type: 'MINUS' })}>-1</button>
        </div>
    );
};

export default Counter;

 

useReducer의 첫 번째 인수에는 리듀서 함수를 넣고 두 번째 인수에는 초기값을 넣는다.

 

그럼 state는 상태 값이고 dispath를 이용해서 액션을 발생시키면 된다. 

 

dispatch(action)처럼 사용하면 리듀서 함수가 호출된다.

 

useReducer의 가장 좋은 점은 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것이다.

 

// 리듀서 함수
cosnt reducer = (state, action) => {
	return {
    	...state,
        [action.name]: action.value
    };
}

const Person = () => {
	const [state, dispatch] = useReducer(reducer, {
    	name: '',
        age: ''
    });
    
    const { name, age } = state;
    const onChange = e => {
    	dispatch(e.target);
    };
    
    return (
    	<div>
        	<div>
            	<input name="name" value={name} onChange={onChange} />
                <input name="age" type="number" value={age} onChange={onChange} />
            </div>
            <div>
            	이름 : {name}
            </div>
            <div>
            	나이 : {age}
            </div>
        </div>
    );
};

export default Person;

이렇게 사용하면 여러 input 값을 여러 개의 useState를 사용하지 않아도 된다.