useId 로 aria 연결하기

좌측 네비의 펼침 버튼은 aria-controls 로 자기가 여닫는 목록을 가리킨다. 그러려면 목록에 id 가 있어야 하는데, 이 id 를 직접 지으면 곤란해진다.

직접 지으면 안 되는 이유

카운터나 난수로 만들면 서버가 낸 값과 클라이언트가 낸 값이 달라져서 하이드레이션에서 어긋난다. useId 는 트리 안에서의 위치로 값을 만들기 때문에 양쪽이 같은 문자열을 낸다.

const listId = useId();
// <button aria-controls={listId}> … <ul id={listId}>

키로는 쓰지 않는다

useId 는 목록의 key 자리에 쓰라고 만든 게 아니다. 데이터에 이미 안정된 값이 있으면 그걸 쓴다 — 네비는 href 가 그 역할을 한다.