React - 공식문서[1-7] 목록 렌더링

리액트 공식문서 "목록 렌더링"에서 중요한 부분이나 알게된 부분만 정리하려고 한다.

 

 

1.key로 목록의 항목 순서 유지하기 

각 배열 항목에는 해당 배열의 항목들 사이에서 고유하게 식별할 수 있는 문자열 또는 숫자인 key를 부여해야 합니다.

<li key={person.id}>...</li>

map() 호출 내부의 JSX 요소에는 항상 key가 필요합니다!

 

key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 합니다.

이는 배열 항목이 (정렬 등으로 인해) 이동하거나, 삽입되거나, 삭제될 수 있는 경우 중요해집니다.

잘 만들어진 key는 React가 정확히 무슨 일이 일어났는지 추론하고 DOM 트리를 올바르게 업데이트하는 데 도움이 됩니다.

 

React에 key가 필요한 이유는 무엇일까요? 

데스크톱의 파일에 이름이 없다고 상상해 봅시다.

파일 이름 대신 첫 번째 파일, 두 번째 파일 등의 순서로 파일을 참조할 것입니다.

물론 익숙해질 수도 있지만, 파일을 삭제하면 혼란스러워질 수도 있습니다.

두 번째 파일이 첫 번째 파일이 되고, 세 번째 파일이 두 번째 파일이 되는 식으로 말이죠.

 

폴더의 파일 이름과 배열의 JSX key는 비슷한 역할을 합니다.

key를 사용하면 형제 항목 사이에서 특정 항목을 고유하게 식별할 수 있습니다.

잘 선택한 key는 배열 내 위치보다 더 많은 정보를 제공합니다.

만약 재정렬로 인해 어떤 항목의 위치가 변경되더라도,

해당 항목이 사라지지 않는 한, React는 key를 통해 그 항목을 식별할 수 있습니다.

 

 

key를 사용하면서 주의점

1. 인덱스 값으로 key값을 지정하지 말아라!

배열에서 항목의 인덱스를 key로 사용하고 싶을 수도 있습니다.

사실 여러분이 key를 지정하지 않으면, React는 인덱스를 key로 사용합니다.

그러나 여러분이 렌더링한 항목의 순서는 새 항목이 삽입되거나, 삭제되거나, 배열의 순서가 바뀌는 등에 따라 변경될 수 있습니다.

인덱스를 key로 사용하면 종종 미묘하고 혼란스러운 버그가 발생합니다.

2. key를 즉석에서 생성하지 말아라!

마찬가지로 key={Math.random()}과 같이 즉석에서 key를 생성하지 마세요.

이렇게 하면 렌더링될 때마다 key가 일치하지 않아 매번 모든 컴포넌트와 DOM이 다시 생성됩니다.

속도가 느려질 뿐만 아니라 목록 항목 내부의 사용자 입력도 손실됩니다.

대신 데이터에 기반한 안정적인 ID를 사용하세요.

3. key값은 props에 넘어가지 않는다!

컴포넌트는 key를 prop으로 받지 않는다는 점에 유의하세요.

React 자체에서 힌트로만 사용됩니다.

컴포넌트에 ID가 필요한 경우 별도의 프로퍼티로 전달해야 합니다: <Profile key={id} userId={id} />.

4. Data.now()는 key으로 사용하는 것을 권장하지 않는다! (개발서버용)

Data.now()에서 나오는 값은 같은시간에 로컬서버에서 똑같이 실행하면 같은 값이 나올 수 있다.

즉 고유값이 아닐 가능성이 있다.

혼자서는 사용해도 되지만 서버를 같이쓸 때는 사용하지 않는 것이 좋다!