[ 1. useReducer 란 ? ]
상태를 업데이트 할 때에는 useState를 사용해서 새로운 상태를 설정해주었습니다. 상태를 관리하게 될 때 useState를 사용하는 것말고도 다른방법이 있는데 바로 useReducer 입니다.
•
useReducer를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있습니다.
[ 1.1 useReducer를 알아보기전 reducer에 알아보자 ]
•
useReducer Hook 함수를 사용해보기 전 reducer가 무엇인지 알아보겠습니다.
•
reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수
[ 예 시 ]
function reducer(state, action) {
// 새로운 상태를 만드는 로직
// const nextState = ...
return nextState;
}
JavaScript
복사
•
reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태입니다.
•
여기서 action 은 업데이트를 위한 정보를 가지고 있습니다. 주로 type 값을 지닌 객체 형태로 사용하지만, 꼭 따라야 할 규칙은 따로 없습니다.
[ action의 예시 ]
// 카운터에 1을 더하는 액션
{
type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
type: 'CHANGE_INPUT',
key: 'email',
value: 'tester@react.com'
}
// 새 할 일을 등록하는 액션
{
type: 'ADD_TODO',
todo: {
id: 1,
text: 'useReducer 배우기',
done: false,
}
}
JavaScript
복사
보신 것 처럼 action 객체의 형태는 자유입니다. type 값을 대문자와 _ 로 구성하는 관습이 존재하기도 하지만, 꼭 따라야 할 필요는 없습니다.
자, 이제 reducer 를 배웠으니 useReducer 의 사용법을 알아봅시다.
[ 1.2 useReducer 사용법 ]
useReducer 의 사용법은 다음과 같습니다.
const [state, dispatch] = useReducer(reducer, initialState);
JavaScript
복사
여기서 state 는 우리가 앞으로 컴포넌트에서 사용 할 수 있는 상태를 가르키게 되고, dispatch 는 액션을 발생시키는 함수라고 이해하시면 됩니다. 이 함수는 다음과 같이 사용합니다: dispatch({ type: 'INCREMENT' }).
그리고 useReducer 에 넣는 첫번째 파라미터는 reducer 함수이고, 두번째 파라미터는 초기 상태입니다.
그럼, Counter 컴포넌트를 만약에 useReducer 로 구현한다면 어떻게 바뀌는지 알아볼까요?
다음 코드를 한번 따라서 작성해보세요.
reducer에 첫번째 인자는 현재 최신 state값을 전달받고 두번째 인자 action은 dispatch({})에서 보낸
action객체를 받는다.
const reducer = (state, action) => {
switch(action.type) {
case 1 :
return state + 1;
case 10 :
return state + 10;
case 100 :
return state + 100;
}
}
JavaScript
복사
