[React] 배열 렌더링 시 주의사항

리액트로 배열을 렌더링 할 때 다음과 같은 문구를 마주치신 적이 있나요?

Warning: Each child in a list should have a unique "key" prop.

 

브라우저 콘솔에 이러한 경고가 나오게 됩니다.

 

이는 리액트에서 배열을 렌더링 할 때 렌더링한 리스트들의 추가, 삽입, 삭제의 기준을 Key Prop을 이용해서 하기 때문에 이를 적어주지 않아서 나타나는 오류 입니다.

 

예를들어서 영화리뷰들이 있는 게시판이 있습니다. 각각의 영화 리뷰들을 렌더링 하는데 반복문으로 렌더링 할 수 있겠죠? 이때 key prop을 지정해주지 않고 리뷰에 있는 input태그 안에 텍스트를 입력하고 그 리뷰를 삭제했다면 어떻게 될까요? 리뷰는 삭제가 될 수 있어도 input 태그 안의 텍스트는 다른 배열의 요소로 들어가 렌더링 되기 때문입니다.

 

3개의 배열 [1,2,3] 이 있을 때 2를 삭제하여 [1,3]의 결과만 있다면 리액트는 이것이 2가 삭제된 건지 3이 삭제되고 2가 3으로 바뀐 건지 인식하지 못하기에 배열요소를 구별할 수 있는 unique한 key를 통해 배열들을 구분해주어야 합니다.