React 컴포넌트 상태가 꼬였을 때 먼저 할 일

컴포넌트 간 상태 공유가 복잡할수록 문제를 크게 잡으려는 유혹이 생긴다. "혹시 전체 아키텍처가 잘못됐나" 싶어서 모든 파일을 의심하기 시작한다. 하지만 대부분의 경우 단순한 props 전달 실수나 렌더링 순서 문제다.

정상 상태부터 정해두기

컴포넌트를 분리하기 전에 모든 게 한 파일에 있을 때 상태가 제대로 작동하는지 확인하자. 그 상태를 기준점으로 두고, 컴포넌트를 나눈 후 정말 똑같이 작동하는지만 확인하면 된다. "어딘가 이상하다"는 막연한 느낌만 가지고는 절대 못 푼다.

상태 이름부터 명확하게 하기

부모 컴포넌트에서 자식으로 전달하는 props의 이름과, 자식이 부모에게 콜백으로 받는 이름이 매칭되는지 확인해야 한다. 부모에서 onNameChange라고 전달했는데 자식에서 onInputChange로 받고 있으면 당연히 작동 안 한다. 규칙을 정해서 이름을 일관되게 짓자.

# 컴포넌트 간 prop 흐름을 시각화하려면
npm run build

# React DevTools를 열고 컴포넌트 트리에서 어느 props가 어디로 흐르는지 추적

렌더링 순서가 맞는지 확인하기

부모가 상태를 업데이트해서 자식을 리렌더링해야 하는데, 타이밍이 맞지 않으면 이전 상태의 값이 화면에 나타난다. 특히 비동기 작업이 섞여 있으면 더 복잡해진다. 리렌더링 타이밍을 명확히 하려면 상태 변경과 동시에 화면을 스크린샷해두고, 콘솔 로그에 타임스탬프를 붙여두면 순서를 추적할 수 있다.

작은 변경으로 검증하기

컴포넌트 구조를 조금만 간단하게 만들어보자. 자식 컴포넌트를 하나만 남기고 나머지를 주석 처리한다. 그 상태에서 상태 전달이 제대로 되는지 본다. 작동하면 주석을 하나씩 풀면서 어느 지점에서 문제가 생기는지 찾는다. 전체를 한 번에 손대는 것보다 훨씬 빠르다.