[front] React 필요한 거 정리

useState와 useReducer는 React에서 상태 관리를 위한 두 가지 주요 훅입니다. 이 두 훅은 다음과 같은 차이점을 가지고 있으며, 언제 사용해야 하는지 이해하려면 이러한 차이를 고려해야 합니다.

useState: useState는 간단한 컴포넌트 상태 관리에 사용됩니다. 컴포넌트의 상태를 하나의 값으로 저장하고 갱신하는 데 적합합니다. 간단한 상태 변경 또는 토글 작업과 같은 간단한 상태 관리 시나리오에 사용됩니다. 예시: 버튼 클릭과 같은 이벤트에 대한 상태 변경.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

useReducer: useReducer는 복잡한 상태 논리를 다루는 데 사용됩니다. 상태 변경에 대한 로직을 더 자세하게 커스터마이징하려는 경우 또는 상태 변경이 여러 단계를 거쳐야 하는 경우에 유용합니다. 컴포넌트 상태 관리 로직을 외부에서 관리하고, 액션을 통해 상태 변경을 트리거합니다. 예시: 복잡한 양식의 유효성 검사, 상태 전이 또는 데이터 가져오기와 같은 작업.

import React, { useReducer } from 'react';

// 리듀서 함수 정의
function counterReducer(state, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
}

function Counter() {
const [state, dispatch] = useReducer(counterReducer, { count: 0 });

const increment = () => {
dispatch({ type: 'INCREMENT' });
};

const decrement = () => {
dispatch({ type: 'DECREMENT' });
};

return (

<div>
<p>Count: {state.count}</p>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}

요약하면, 간단한 상태 관리에는 useState를 사용하고, 복잡한 상태 관리 또는 상태 변경 로직을 세밀하게 제어해야 하는 경우에는 useReducer를 사용합니다.

useState

useState는 주요 state 관리 도구 보통 useState로 시작
개별 state 다루기 적합
몇 종류 없을 떄 적합

useReducer

일반적으로 더 강력
리듀서 함수 사용 가능

리듀서 함수 사용 가능

Share this post