Builder.shin

재택근무 전환 후 React Context API 남용 문제 개선

문제 상황

지난주부터 전사 재택근무로 전환되면서 코드 리뷰가 느슨해진 틈을 타 Context API 사용이 급증했다. 기존 Redux 코드베이스에서 작은 기능 추가 시 props drilling이 번거롭다는 이유로 Context를 남발한 결과, 메인 대시보드에서 input 입력 시 전체 컴포넌트가 리렌더링되는 현상이 발생했다.

원인 분석

const FilterContext = React.createContext();

function Dashboard() {
  const [filters, setFilters] = useState({ search: '', category: '' });
  
  return (
    <FilterContext.Provider value={{ filters, setFilters }}>
      <Header />
      <Sidebar />
      <ContentArea />
      <Footer />
    </FilterContext.Provider>
  );
}

filters 객체가 변경될 때마다 Provider 하위 모든 컴포넌트가 리렌더링되었다. React DevTools Profiler로 확인 결과 평균 렌더링 시간이 120ms에서 340ms로 증가했다.

해결 방법

  1. Context 분리: 읽기 전용 값과 업데이트 함수를 별도 Context로 분리
const FilterStateContext = React.createContext();
const FilterDispatchContext = React.createContext();

function FilterProvider({ children }) {
  const [filters, setFilters] = useState({ search: '', category: '' });
  
  return (
    <FilterStateContext.Provider value={filters}>
      <FilterDispatchContext.Provider value={setFilters}>
        {children}
      </FilterDispatchContext.Provider>
    </FilterStateContext.Provider>
  );
}
  1. 정말 필요한 곳만 사용: 2depth 이하 props drilling은 그냥 props로 전달
  2. Redux는 글로벌 상태 전용: 인증, 사용자 정보 등만 Redux 유지

결과

평균 렌더링 시간이 95ms로 감소했다. 팀 슬랙에 "Context는 3depth 이상 props drilling이 필요하거나 진짜 글로벌 상태일 때만 사용" 가이드를 공유했다. 재택근무로 커뮤니케이션이 어려워진 만큼 코드 리뷰를 더 꼼꼼히 해야겠다.

재택근무 전환 후 React Context API 남용 문제 개선