React Hooks의 규칙, 단순한 약속이 아닌 Linked List의 필연적 결과

Context

React Hooks 사용 시 호출 순서를 엄격히 지켜야 하는 규칙 존재. 다수 개발자가 규칙의 이유를 모른 채 관습적으로 사용함. 내부 데이터 구조에 대한 이해 부족으로 useEffect 의존성 배열 설정 시 혼란 발생.

Technical Solution

• 단일 전역 변수 기반 상태 관리의 한계로 인해 여러 Hook 사용 시 데이터 덮어쓰기 문제 발생
• Hook 호출 순서를 추적하는 Cursor와 상태 저장용 Array를 도입하여 각 Hook에 고유 슬롯 할당
• 매 렌더링 시작 전 Cursor를 0으로 초기화하여 동일한 순서로 상태에 접근하는 구조 설계
• 실제 React 내부 구현체인 Linked List 구조를 통해 mount와 update 단계에서 Hook 노드를 순차적으로 탐색
• Render 외부 호출을 차단하기 위해 렌더링 시에만 유효한 Dispatcher 객체를 활용한 Null 체크 메커니즘 적용
• 조건문이나 반복문 내 Hook 호출 시 Cursor 위치가 어긋나 이후 모든 Hook의 상태가 오염되는 구조적 특성 확인

Key Takeaway

프레임워크의 제약 사항은 임의의 정책이 아니라 선택한 데이터 구조(Linked List)의 무결성을 유지하기 위한 물리적 제약임.