"규칙이라서 안 된다" 수준의 암기 답인지, 렌더마다 훅 호출이 슬롯에 매핑된다는 *내부 모델*까지 가져오는지를 가른다. 모델을 들고 와야 자연스럽게 "분기는 어디서 처리해야 하는지"까지 답할 수 있다.
React 훅은 컴포넌트가 렌더될 때마다 호출 순서를 인덱스로 써서 내부 상태 슬롯에 매핑한다. 즉 "이번 렌더의 첫 번째 useState" = "내부 슬롯 0"이라는 식이다. 조건문이나 반복문 안에서 useState를 호출하면 렌더마다 호출 순서가 달라지면서 슬롯이 어긋나고, 한 컴포넌트가 다른 상태를 받아 쓰는 사고가 난다. 그래서 훅은 컴포넌트 최상위에서 항상 같은 순서로 호출해야 하고, 분기가 필요하면 훅 호출 이후에 값 기준으로 렌더 분기로 처리한다. ESLint 규칙(react-hooks/rules-of-hooks)은 이 계약을 미리 잡아주는 안전망이다.
훅을 조건문 안에 두었다가 상태가 섞이는 버그를 직접 겪고 고친 경험이 있다면, 그 디버깅 과정을 답변의 "순서 모델" 설명으로 가져올 수 있다
ESLint `react-hooks/rules-of-hooks`를 팀에서 강제로 켜고 코드 리뷰 룰로 정착시킨 경험이 있다면 규칙의 운영적 필요성을 본인 사례로 풀 수 있다
조기 return·조건 분기 안의 훅을 컴포넌트 분리·커스텀 훅으로 풀어낸 경험이 있다면 "우회 패턴" 부분을 본인 코드로 말할 수 있다
AI가 생성한 컴포넌트에서 훅 규칙 위반을 코드 리뷰로 잡아본 경험이 있다면 AI 산출물 검수 관점을 답변에 자연스럽게 엮을 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.