useReducer?

useReducer란?

useReducer는 상태 관리를 위한 React 훅으로, useState와 유사하지만 좀 더 복잡한 상태 로직을 다룰 때 유용함.

특히 여러 상태가 서로 관련되어 있으며, 다양한 상태 전환이 필요한 경우에 useReducer는 코드의 가독성과 유지 보수성을 높인다.

주요 개념과 사용 방법

1. Reducer 함수 정의

   Reducer 함수는 현재 상태와 action을 받아 새 상태를 반환하는 함수. 아래와 같은 형태로 정의

   const reducer = (state, action) => {
     switch (action.type) {
       case 'INCREMENT':
         return { count: state.count + 1 };
       case 'DECREMENT':
         return { count: state.count - 1 };
       default:
         throw new Error('Unhandled action');
     }
   };
   
   

2. useReducer 훅 사용

   useReducer는 세 가지 요소를 반환한다. state, dispatch, 그리고 초기 상태

   const [state, dispatch] = useReducer(reducer, initialState);
   

   여기서 dispatch는 reducer 함수로 액션을 전달하는 역할을 함.

3. 초기 상태 설정

   초기 상태는 간단한 객체 또는 초기화 함수로 지정할 수 있다.

   const initialState = { count: 0 };
   

4. Action dispatch

   컴포넌트에서 상태를 업데이트하려면 dispatch를 호출하고 type 속성을 가진 객체를 전달한다.

   <button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
   <button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
   
   

상태관리에서의 useRef

useRef로 api데이터를 관리해도 좋은가?

useRef에 API 데이터를 저장해 관리할 수 는 있지만, 일반적으로는 useState나 useQuery(React Query)또는 Apollo Client와 같은 상태 관리 방식을 사용하는 것이 더 권장됨.

그 이유는 useRef가 값이 변경되어도 렌더링을 트리거 하지 않기 때문이다.

즉, useRef로 API 데이터를 관리하면 데이터가 업데이트되어도 UI에 자동으로 반영되지 않는다.

하지만 useRef를 이용해 API 데이터를 관리하는 경우가 몇 가지 존재한다.