상태를 관리할 때 사용하는 것으로 useState와 useReducer 가 있다.
하지만 일반적으로 useState를 사용하고 useReducer를 사용하는 일은 거의 없었다.
그러다보니 궁금함이 생겼다.
useReducer는 언제 사용하고, 왜 사용하는 것일까?
먼저 간략하게 둘의 차이를 알아보자.
useState
▶ 간단한 상태 관리
▷ 값이 하나인 경우
▷ 상태들이 서로 관련이 없는 경우
▶ 컴포넌트 내에서 사용
const [state, setState] = useState(initialState);
useReducer
▶ 복잡한 상태 관리
▷ 상태들이 서로 관련이 있거나, 참조가 필요한 경우
▷ ex) 로그인된 사용자의 권한을 확인하여 다른 화면에 보여줘야 하는 경우
▶ 여러 컴포넌트에서 상태가 공유되야 하는 경우
▷ Context API 사용 시 사용하는 것이 일반적
▶ reducer를 따로 선언하는 경우
const [state, dispatch] = useReducer(reducer, initialState);
정리하면,
useState는 컴포넌트 내에서 관련 없는 상태를 관리하는 경우 사용한다.
반면 useReducer는 좀 더 복잡한 상태를 관리하며, 여러 컴포넌트에서 사용되는 경우 사용한다.
이것을 예시를 통해서 더 알아보자.
useState
import { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>Count {count}</p>
<button onClick={() => setCount(prev => prev+1)}>Increment</button>
<button onClick={() => setCount(prev => prev-1)}>Decrement</button>
</div>
)
}
useState하면 많이 나오는 Count 예제이다.
여기서 useState는 count라는 상태를 가지고 있고, 컴포넌트 내에서만 상태를 관리할 때 사용한다.
useReducer
const initialState = {
products: [],
categories: [],
orders: [],
user: null,
searchQuery: '',
// ...
}
e-commerce를 예로 제품, 카테로기, 주문 정보, 사용자 정보, 쿼리 정보 등을 담아야 할 때, 사용했다.
이것을 useState로 관리하지 않고, useReducer로 관리한 이유는 user를 기준으로 products, orders 등을 넣기 때문이다.
const reducer = (state, action) => {
switch(action.type) {
case "SET_PRODUCTS":
return { ...state, products: action.payload };
case "SET_CATEGORY":
return { ...state, categories: action.payload };
// ...
}
}
지금까지 예시를 통해서 useState와 useReducer를 사용하는 경우를 알아봤다.
하지만 컴포넌트 내부에서는 useState만 사용해도 충분한 경우가 대부분이다.
useReducer를 사용하는 것이 효율적인 경우는
▶ 관리해야 하는 상태가 많은 경우,
▶ 상태들이 서로 관련이 있는 경우,
▶ 비즈니스 로직 분리하는 경우,
▶ Immutability
'React > 실험실' 카테고리의 다른 글
[React] useMemo를 사용하지 말아야 한다! (0) | 2023.04.20 |
---|---|
[React] React18에서 추가된 Hook (0) | 2023.04.17 |
[React] CRA Path Alias 설정하기 (0) | 2023.04.11 |
[React] styled-components theme (0) | 2023.03.20 |
[React] swiper 부드럽게 흐르는 슬라이드 (0) | 2023.03.15 |
댓글