재택근무 전환 후 React 컴포넌트 상태 관리 재정비

배경

이번 주부터 전사 재택근무로 전환되면서 코드 리뷰와 페어 프로그래밍 방식이 바뀌었다. 기존에 대면으로 빠르게 처리하던 것들이 비동기 커뮤니케이션으로 바뀌면서, Redux 보일러플레이트가 생각보다 큰 장애물이 되었다.

간단한 UI 상태 하나 추가하는데도 action, reducer, selector를 모두 작성해야 하고, 신입 개발자가 이해하기에 진입장벽이 높다는 피드백이 계속 있었다.

접근 방법

전역 상태가 정말 필요한 부분(인증, 테마 등)과 로컬 상태로 충분한 부분을 구분했다. 후자의 경우 Context API + useReducer 조합으로 전환했다.

// contexts/ModalContext.js
const ModalContext = createContext();

function modalReducer(state, action) {
  switch (action.type) {
    case 'OPEN':
      return { isOpen: true, content: action.payload };
    case 'CLOSE':
      return { isOpen: false, content: null };
    default:
      return state;
  }
}

export function ModalProvider({ children }) {
  const [state, dispatch] = useReducer(modalReducer, {
    isOpen: false,
    content: null
  });

  return (
    <ModalContext.Provider value={{ state, dispatch }}>
      {children}
    </ModalContext.Provider>
  );
}

결과

• Redux 스토어 크기 40% 감소
• 새로운 기능 추가 시 파일 생성 개수 평균 3개 → 1개
• 코드 리뷰 시간 단축 (비동기 소통에서 중요)

전역 상태는 여전히 Redux를 사용하지만, 컴포넌트 트리 일부에서만 필요한 상태는 Context로 격리했다. 재택 환경에서 코드 복잡도 관리가 얼마나 중요한지 체감한 한 주였다.