Builder.shin

재택근무 전환 후 React 컴포넌트 리팩토링

배경

이번 주부터 전사 재택근무로 전환되면서 팀 내 협업 방식을 재정비하고 있다. 화상회의로 진행하는 코드 리뷰에서 기존 클래스 컴포넌트의 복잡한 로직이 설명하기 어렵다는 의견이 나왔고, Hooks 마이그레이션을 본격적으로 시작했다.

문제가 된 코드

특히 문제였던 건 API 호출과 폴링 로직이 섞인 대시보드 컴포넌트였다.

class Dashboard extends React.Component {
  componentDidMount() {
    this.fetchData();
    this.interval = setInterval(this.fetchData, 5000);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      clearInterval(this.interval);
      this.fetchData();
      this.interval = setInterval(this.fetchData, 5000);
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  fetchData = () => {
    // API 호출 로직
  }
}

생명주기 메서드 3개에 걸쳐 interval 관리 로직이 중복되어 있었다.

Hooks로 전환

function Dashboard({ userId }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const result = await api.getDashboard(userId);
      setData(result);
    };

    fetchData();
    const interval = setInterval(fetchData, 5000);

    return () => clearInterval(interval);
  }, [userId]);

  return <div>{/* 렌더링 */}</div>;
}

하나의 useEffect로 통합되면서 interval 설정/해제 로직이 한 곳에 모였다. dependency array에 userId만 명시하면 props 변경 시 자동으로 cleanup 후 재실행된다.

결과

  • 코드 라인 수 30% 감소
  • 화상 코드 리뷰 시 설명 시간 단축
  • 신규 입사자가 로직 파악하는 시간 절반으로 줄어듦

재택 환경에서 비동기 커뮤니케이션이 늘어나면서 코드 자체의 가독성이 더 중요해졌다는 걸 체감하고 있다.

재택근무 전환 후 React 컴포넌트 리팩토링