React 컴포넌트 흐름 점검

React 컴포넌트 추적 흐름

React 화면이 복잡해질수록 컴포넌트를 많이 나누는 것보다 데이터가 어디서 들어오고 어디서 바뀌며 어떤 화면으로 계산되는지 추적하는 능력이 중요합니다. props는 입력, state는 소유한 변화, 렌더는 그 결과입니다.

01

입력 값 표시

컴포넌트가 받는 props와 기본값을 먼저 확인해 외부 계약을 이해합니다.

props
02

상태 소유자 탐색

값을 바꾸는 이벤트와 그 값을 읽는 컴포넌트를 기준으로 state 위치를 정합니다.

owner
03

렌더 조건을 읽는다

조건부 렌더링, 목록 key, fallback UI가 현재 상태와 맞게 계산되는지 봅니다.

view
04

변경 의도를 올린다

자식은 props를 직접 바꾸지 않고 콜백으로 부모에게 변경 의도를 전달합니다.

callback
입력
props와 context로 들어오는 값 부모 변경이 자식 렌더에 어떤 영향을 주는지 추적합니다.
in
변경
event handler와 setState 비동기 갱신과 batch 처리 때문에 이전 상태 기반 업데이트가 필요할 수 있습니다.
change
출력
JSX와 DOM 결과 렌더 결과가 의도와 다르면 조건, key, memoization을 차례로 봅니다.
out

상태 끌어올리기 · 파생 상태 · 목록 key 점검

상태 끌어올리기 형제 컴포넌트가 같은 값을 필요로 하면 가장 가까운 공통 부모가 후보입니다.
파생 상태 props에서 계산 가능한 값을 state로 복사하면 동기화 버그가 생기기 쉽습니다.
목록 key 재정렬되는 목록에서 index key는 잘못된 상태 재사용을 만들 수 있습니다.

추적 질문

이 값은 어디서 들어오는가
누가 바꾸는가
바뀌면 어떤 컴포넌트가 다시 그려지는가
화면에는 어떤 조건으로 나타나는가