🪡 useReducer에 대하여
조금 더 복잡한 상태 관리를 할 때 사용하는 리액트 훅.
넓은 범위에서는 useState와 비슷하다.
사용 방법
// useState
const [todos, setTodos] = useState([]);
// useReducer
const [todos, dispatch] = useReducer(reducer, []);useState와 비교하며 보면 더 빠르게 익힐 수 있을 것 같아 위와 같이 사용 예시를 작성하였다.
기본적으로 useReducer는 두 매개변수로 reducer 함수와 객체의 초기값을 받는다.
그리고 useState를 사용할 때 객체의 값을 변경하기 위한 함수인 set-은 useReducer에서 dispatch로 변경된다.
특징
예시 코드와 함께 useReducer의 특징, 적용 방식을 기록하려고 한다.
위 코드는 지난 useRef 포스트에서 사용한 코드를 포함하고 있다.
먼저 useReducer는 todos 객체에 Line4와 같이 사용하였다. 매개변수로는 reducer 함수와 todos 객체의 초기값인 빈 배열을 넣었다.
함수 onClickAdd와 onClickDelete는 서로 다른 컴포넌트에 해당 함수를 props로 전달하기 위해 만들어졌는데, 이 때 함수 내부에서 dispatch 를 통해 액션 객체를 인수로 전달한다.
reducer 함수와 액션 객체 타입의 선언은 다음과 같이 할 수 있다.
// Action 객체의 타입을 서로소 유니온 타입으로 정의함(!)
type Action =
| {
type: "CREATE";
data: {
id: number;
content: string;
};
}
| {
type: "DELETE";
id: number;
}
// reducer 함수: state와 action 객체를 매개변수로 받음.
function reducer(state: Todo[], action: Action) {
switch (action.type) {
case "CREATE": {
return [...state, action.data];
}
case "DELETE": {
return state.filter((it) => it.id !== action.id)
}
}
}reducer 함수는 매개변수로 state와 action 객체를 받는다.
사용하려고 하는 액션 객체의 타입을 Action이라는 이름의 타입으로 선언하고, reducer 함수에서 그 타입에 따른 작업을 구현하였다.
먼저 onClickAdd 함수에서 사용될 "CREATE" 액션의 경우 배열을 반환하는데, 그 배열에는 기존 Todo 배열의 모든 요소를 spread 연산자를 이용해 넣고, dispatch를 통해 받은 액션 객체를 배열의 맨 뒤에 추가한다.
onClickDelete 함수에서 사용될 "DELETE" 액션의 경우 기존 Todo 배열에서 액션 객체가 가진 id 값을 가진 요소를 제거한 배열을 반환한다.
💡 useReducer의 장단점
➰ 장점
- 복잡한 상태 관리에 적합함: 상태와 업데이트 로직을 하나의 함수로 관리할 수 있어, 복잡한 상태 업데이트나 여러 상태가 결합된 로직을 구현할 때 유리.
- 코드의 명확성: 상태 업데이트 로직이 reducer 함수에 집중되기 때문에, 코드의 구조가 명확해지고 디버깅이 쉬워짐.
- 상태와 로직의 분리: 상태와 상태를 변경하는 로직을 분리하여 테스트하기 쉽고, 재사용성을 높일 수 있음.
➰ 단점
- 복잡한 구현: 간단한 상태 업데이트에는 useReducer가 useState보다 코드가 복잡해질 수 있음.
- 비교적 높은 러닝 커브: 상태 업데이트를 reducer 함수로 분리하고 dispatch를 사용하여 액션 객체를 보내야 하므로, 사용 초기에는 어렵게 느껴질 수 있음.
🤔 언제 useReducer를 사용해야 할까?
- 상태가 복잡하고 여러 상태가 상호작용할 때
- 상태 업데이트 로직이 복잡해서 구조적인 관리가 필요할 때
- Redux와 같은 패턴을 익히고 싶을 때
🤔언제 useState를 사용해야 할까?
- 단순한 상태를 관리할 때
- 코드의 간결함과 가독성을 유지하고 싶을 때
Reference
👩🏻🏫 한입 크기로 잘라 먹는 타입스크립트(TypeScript)
https://www.inflearn.com/course/한입-크기-타입스크립트
