[ChatGPT 챗봇 실습 10강] 상태 관리 도입 – useContext와 useReducer로 구조화

이번 강의에서는 복잡해진 챗봇 상태를 더 효율적으로 관리하기 위해 React의 전역 상태 관리 기법인 useContext와 useReducer를 적용합니다.
상태를 컴포넌트 간에 안정적으로 공유하며 코드 구조를 깔끔하게 유지할 수 있습니다.

용어 설명

• useContext: 컴포넌트 트리에서 전역 상태를 공급하고 사용하는 훅
• useReducer: 상태 업데이트 로직을 액션 기반으로 분리해주는 훅
• 액션: 상태를 변경하기 위한 식별자와 데이터(payload)를 포함한 객체

기본 개념

• 기존에는 ChatBot 컴포넌트 내부에서만 상태를 관리했음
• 이를 Context로 전역 공급하고 Reducer로 액션 단위 처리함으로써 확장성과 유지보수성을 확보

주요 사용 위치

• 메시지 상태를 여러 컴포넌트가 참조할 때
• 대화 히스토리, 입력값, 로딩 상태 등을 분리 관리할 때

구체적 코드 예시

// ChatContext.js
const ChatContext = createContext();
const initialState = {
  messages: [],
  isLoading: false,
};
function reducer(state, action) {
  switch (action.type) {
    case 'SEND':
      return { ...state, messages: [...state.messages, action.payload] };
    case 'RECEIVE':
      return { ...state, messages: [...state.messages, action.payload], isLoading: false };
    case 'RESET':
      return initialState;
    default:
      return state;
  }
}
export function ChatProvider({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <ChatContext.Provider value={{ state, dispatch }}>
      {children}
    </ChatContext.Provider>
  );
}
export const useChat = () => useContext(ChatContext);

핵심 요점 정리

• 상태를 전역으로 공급하려면 Context와 Provider로 감싸야 함
• useReducer로 상태 변경 로직을 분리하면 유지보수가 쉬워짐
• 액션 단위로 상태를 관리해 명확한 데이터 흐름 확보 가능
  
  
  

💬 댓글

이번 글이 도움이 되었길 바랍니다. 궁금한 점이나 요청이 있다면 언제든 댓글로 남겨주세요. 댓글은 저에게 큰 힘이 됩니다. 다음 글도 기대해주세요.