[React] useReducer 이해하기

useReducer

필요성

초반에 배우는 리액트는 대부분 app 컴포넌트 내에서 useState를 이용해 상태 변화 처리 함수를 사용한다.

✨ 상태 변화 처리 함수의 대표적인 예 : onCreate, onEdit, onRemove

 

하지만 규모가 점점 커지고 처리 내용이 많아질 수록 컴포넌트가 무거워지고 비효율적이다.

따라서 상태 업데이트 로직을 컴포넌트에서 분리,

즉 컴포넌트 외부 혹은 다른 파일에 작성할 수 있도록 하는 것이 useReducer.

 

사용법

useReducer는 리덕스의 로직과 흡사하다. 👇

2022.08.01 - [코딩공부] - [Redux] 리덕스의 필요성과 구성 요소, 작동 원리

 

reducer

그렇기에 reducer 함수가 꼭 필요하다.

recuder : 현재 상태와 액션 객체를 인자로 받아와서 새로운 상태를 반환해주는 함수

const reducer = (state,action) => {
	switch (action.type) {
		case 1:
			return state+1;
    	...
    }
}

// or

function reducer(state, action) {
  const nextState = ...
  return nextState;
}

 

useReducer

const [state, dispatch] = useReducer(reducer, initialState);

dispatch : state를 변화시키는 action 을 발생시키는 함수

useReducer 함수 호출 시 0번째 인자로는 reducer 함수를 꼭 전달해야한다.

dispatch가 상태변화를 발생시키면 그 상태변화를 리듀서가 처리한다.

 

 

예시로 살펴보자면,

const reducer = (state, action) => {
	switch (action.type) {
    	case 1:
        	return state + 1;
        case 10:
        	return state + 10;
        default:
        	return state;       
     }
}

const Counter = () => {
	const [count, dispatch]=useReducer(reducer, 1);
    
    return (
    	<div>
        	{count}
            <button onClick={()=>dispatch({ type: 1 })}>add 1</button>
            <button onClick={()=>dispatch({ type: 10 })}>add 10</button>
        </div>
    )
}

 

위의 코드가 작동되는 순서는 다음과 같다.

add1 버튼을 누르면, reducer 함수가 실행이 되는데
reducer 함수가 받는 state는 1이 되고, (현재 스테이트는 1 = useReducer의 1번째 인자)
action은 {type:1} 이라는 객체를 받는다.
그러면 리듀서 함수에서 action.type에 따라 새로운 state를 반환한다.
새 state로 count가 업데이트되므로 {count}에 숫자가 변경된다.

 

 

useReducer를 사용해 count라는 state를 만들면 그 초기값이 1로 할당이 된다.

1 이라는 값, 즉 count의 상태를 변경하고 싶으면

dispatch 함수를 호출하는데 이 때 action 객체를 전달한다.

✔ action은 업데이트를 위한 정보를 가지고 있는데,

action의 형태는 정해져있지 않지만, 주로 type 값을 대문자와 _로 구성한다.

reducer는 가장 최신의 state, 1을 첫번째 인자로,

dispatch가 전달한 action을 두번째 인자로 받는다.

그리고 받은 action의 type에 따라 case 별로 각각 다른 state를 번환한다.

이렇게 새로 작성된 state가 {count}에 표시된다.

 

정리하자면,

dispatch(상태 변화 함수)를 호출하여 action(상태 변화)을 발생시키고,

reducer(상태 변화 처리 함수)가 이를 처리한다.

 

 

 

처음 useReducer를 접했을 때는 이해가 잘 안 갔는데,

리덕스를 공부해보니 이제서야 조금 이해가 가는 것 같다.

useReducer는 리덕스를 대신하여 context API와 주로 함께 사용되는데,

이는 다음 포스팅에 정리할 예정이다.

 

 

참고 : 

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/dashboard

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

https://react.vlpt.us/basic/20-useReducer.html

20. useReducer 를 사용하여 상태 업데이트 로직 분리하기 · GitBook