useState와 useReducer 모두 리액트 상태 관리 방법이다. 그렇다면 왜 굳이 useState를 두고 useReducer를 추가로 사용하는 것일까?
[useReducer의 장점]
- 상태 업데이트 로직을 컴포넌트 바깥에 작성할 수 있다.
-> 여러 컴포넌트에서 재사용이 가능하다.
-> 컴포넌트와 상태 관리를 분리해서 관리가 가능하다.
-> 한 번 작성하고 여러 군데서 가져다가 쓸 수 있기 때문에 useState를 여러번 쓰지 않아도 된다.
-> 데이터 상태 관리 포인트가 한군데라 유지 보수가 용이하다.
그렇다면 무조건 useReducer를 쓰는게 이득일까?
아니다. 하나의 컴포넌트에서만 쓰는 값이 있다면 useState가 적절하며, 여러군데에서 쓰이는 값이라면 useReducer가 적절하다. 적당히 두 상태 관리 방법을 섞어서 쓰면 된다.
[예시를 통해 보는 useReducer 사용법]
reducer 정의: function reducer(상태 관리 대상 변수, 실행할 액션명) {}
- 인자로 들어오는 액션명을 통해서 reducer 함수 내부에서 분기처리 되어 값을 변경한다.
reducer 사용: const [상태 관리 대상 변수, dispatch] = useReducer(리듀서 함수, 초기값);
import { useReducer } from 'react';
function reducer(state, action) {
if (action.type === 'incremented_age') {
return {
age: state.age + 1
};
}
throw Error('Unknown action.');
}
export default function Counter() {
const [state, dispatch] = useReducer(reducer, { age: 42 });
return (
<>
<button onClick={() => {
dispatch({ type: 'incremented_age' })
}}>
Increment age
</button>
<p>Hello! You are {state.age}.</p>
</>
);
}
코드 출처: React 공식 문서 https://react.dev/reference/react/useReducer
'Web > React JS' 카테고리의 다른 글
[React] Context 란? (0) | 2023.10.17 |
---|---|
[React] 불변성(Immutability) (0) | 2023.10.15 |
[React] React JS 란? (1) | 2023.10.12 |