[리액트] useReducer 이해하기

Hook을 사용한 함수형 리액트에서는 useState와 값을 전달하는 함수로 상태 변수들을 관리했다.

useState는 반드시 컴포넌트 내부에 선언되어 있어야 하고, 하나의 상태 변수에 대해 여러개의 함수를 정의해서 연산한다.

단순한 구조라면 useState가 간단하지만, state와 관련된 부분을 재 사용해야하거나, 하나의 상태 변수에 관여하는 연산이 많아질 경우 코드의 가독성이 떨어지게 된다.

 

이를 위해 useReducer를 사용한다.

useReducer는 하나의 상태 변수에 관여하는 함수들을 하나로 묶고, 다른 컴포넌트에서도 재 사용 할 수 있도록 해준다.

또, 상태 변수의 관리는 controller에 해당하는 부분이므로 별도의 파일에 useReducer를 정의해서 사용한다면 MVC 형태로도 구축 가능할 것이다.

 

useReducer

정의

//컴포넌트 내부에서 아래와 같이 정의할 수 있다.
const [state, dispatch] = useReducer(myReducer, initialState);

//state는 상태 변수
//dispatch는 함수 호출 : dispatch({type : 'ADD'}) 와 같은 형태로 호출한다.
//myReducer은 reducer의 선언 명
//initialState는 useState의 그것과 같다.

//Reducer는 컴포넌트 외부라면 어디든 선언해도 된다.
function myReducer(state, action){
//action는 dispatch로 전달해준 매개변수이다.
//switch문을 사용해 동작들을 구분해준다.

switch(action.type){
	case 'ADD' :
    	return state + 1;
    case 'MINUS' :
    	return state - 1;
    default : 
    	return state;
	}
}

 

사용

<button onClick=()=>{dispatch({type:'ADD'});}>ADD</button>
<button onClick=()=>{dispatch({type:'MINUS'});}>MINUS</button>

 

마찬가지로 불변성을 위해 object나 list라면 복사하거나 spread가 필요하다.

controller의 역할이 될 수 있으므로, API 혹은 서버와 통신하는 부분으로 사용될 수 있다.