같은 항목과 같은 위치를 혼동했다
검색 결과 목록에서 항목의 key를 유지하면, 사용자가 클릭하려던 대상도 유지될까? 처음에는 key가 변경 사항을 감지하고 리렌더링을 줄여 주는 값이라고 설명했다.
하지만 key는 목록 안에서 항목의 정체성을 구분하고, 그에 맞게 컴포넌트의 상태를 보존하거나 초기화하는 데 사용된다. 화면의 좌표를 고정하거나 리렌더링을 막는 기능은 아니다.
여기서 기억할 것같은 항목이 유지되는 것과, 같은 좌표 아래에 그 항목이 남아 있는 것은 다른 문제다.
포인터는 항목의 ID를 따라가지 않는다
B서점이 있던 위치에 마우스를 올려 두었다고 생각해 보자. 새 검색 결과가 위에 삽입되면 B서점의 key는 그대로여도 줄의 위치는 내려갈 수 있다. 마우스가 움직이지 않았다면 그 좌표 아래에는 이제 다른 결과가 놓인다.
키보드로 선택한 항목은 인덱스 대신 ID를 저장해 유지할 수 있다. 마우스는 포인터 아래의 결과가 바뀌는 문제를 별도로 다뤄야 한다.
변경 전 변경 후
A카페 새 결과
B서점 ← 포인터 A카페 ← 같은 포인터 좌표
C식당 B서점
C식당
결과 반영을 잠시 미루면 생기는 일
학습용 비교 예제에서는 포인터가 목록 위에 있을 때 새 결과의 표시를 보류하는 방식을 관찰했다. 포인터가 떠난 뒤에는 새 결과가 화면에 나타났다.
이 방식에도 대가가 있다. 포인터를 계속 올려 두면 최신 결과를 보여 주는 시점이 늦어진다. 잘못된 클릭을 줄이는 것과 최신 정보를 빨리 보여 주는 것 사이에서 기준을 정해야 한다.
다음 리뷰에서 확인할 질문
목록의 정체성은 무엇으로 구분하는가? 키보드 선택은 ID와 위치 중 무엇을 따라가는가? 포인터가 멈춰 있는 동안 결과 순서가 바뀌면 무엇이 선택되는가?
이 질문들을 따로 적어 두기로 했다. key 하나가 사용자 상호작용 전체를 해결해 줄 것이라고 생각하지 않기 위해서다.