React에게 key는 '메모리 주소'와 같다

React에서 key를 설명할 때 보통 이렇게 말합니다. 리스트 렌더링할 때 필요한 이름표 맞는 말입니다.

그런데 실무에서 React를 오래 쓰다 보면 조금 다른 느낌이 옵니다. key는 단순한 이름표라기보다 컴포넌트의 메모리 위치를 가리키는 좌표에 가깝습니다. React는 state를 어디에 붙일지 기억한다 React는 렌더링할 때 컴포넌트 트리를 만들고 각 컴포넌트에 state를 연결해 둡니다.

그래서 우리가 onChange 같은 걸로 state를 바꾸면 React는 이렇게 판단합니다. 아, 같은 컴포넌트네.

데이터만 바뀌었구나. 그래서 컴포넌트 인스턴스는 유지한 채 내용만 업데이트합니다.

대부분의 렌더링이 이 방식으로 일어납니다. 그런데 key가 바뀌면 이야기가 달라진다 key가 바뀌는 순간 React의 판단은 완전히 달라집니다.

React 입장에서는 이렇게 보입니다. 기존 컴포넌트 사라짐 새 컴포넌트 등장 즉, 기존 컴포넌트 unmount 새 컴포넌트 mount 그래서 sta...