개요

React에서 javascript의 map과 filter메서드를 활용해 배열에서 데이터를 파싱하여 컴포넌트로 렌더링 할 수 있다. 이 때, 깨름칙하게 나타나는 warning 문구를 볼 수 있다.

Warning?

Error도 아니고 Warning은 뭘까? 일단, 해당 컴포넌트는 제대로 동작해서 그렇게 중요한게 아닐지도? 라는 생각을 하게된다.

리액트에서의 Warning이 발생하더라도 중단되거나 오류가 발생하지 않도록 설계되어있고, 대부분의 메시지는 개발 모드에서만 나타난다고 한다. 개발자가 좀 더 나은 방법으로 코드를 작성할 수 있도록 돕기 위해 설계된 장치이기 때문이다. 따라서 에러없이 동작한다고 무시해서는 안된다.

고유한 key

메시지 내용을 자세히 보면 각각의 자식들은 고유한 key를 가져야 한다고 설명 되어있다. 여기서 중요한 것은 고유한 key를 부여해야 한다는 점이다

key는 각 컴포넌트가 어떤 배열 항목에 해당하는지 React에 알려주어 나중에 매칭할 수 있도록 하고 이는 배열 항목이 이동하거나, 삽입되거나, 삭제될 수 있는 경우 잘 만들어진 key는 React가 정확히 추론하고 DOM 트리를 올바르게 업데이트하는데 도움이 된다.

1. 초기 렌더링

   • React는 map() 함수로 생성된 각 컴포넌트에 대해 key를 검사한다. React는 이 key를 사용하여 DOM 내에서 컴포넌트를 유니크하게 식별하고, 필요한 경우에만 특정 컴포넌트를 업데이트한다.

2. 데이터 업데이트 시

   • 데이터 배열에 변화가 있을 때 (아이템 추가, 삭제, 정렬 등), map() 함수가 다시 실행되어 새로운 컴포넌트 리스트를 생성한다. key를 기반으로 React는 이전 렌더링된 리스트와 새 리스트를 비교한다. key가 같다면 해당 컴포넌트의 상태와 위치 변경 여부를 체크하여 효율적으로 업데이트한다.

key를 올바른 고유한 값을 주게 되면 리액트는 효율적으로 업데이트하여 최적화를 이룰 수 있다. 만약 key값을 주지 않거나 중복된 key값을 받게 되면, 변화가 생길 때마다 새롭게 렌더링하여 과부하가 발생할 수도 있다.

주의사항

1. index는 key값으로 적합하지 않다.

그렇다면, map,filter 메서드의 두 번째 인자인 index를 넘겨줘도 되지 않을까? 고유한 값으로 충분할 것 같다. 하지만, 배열이 업데이트가 될 가능성이 있다면 결국 다시 리렌더링을 유발하고 종종 혼란스러운 버그가 발생할 수도 있기 때문에 지양하는 측면으로 개발해야한다.

2. 즉석에서 key값을 생성하면 안된다.

key={Math.random()}과 같이 즉석으로 key값을 생성하게되면 key값은 고유할 수 있지만, 렌더링될 때마다 key가 일치하지 않아 결국 매번 모든 컴포넌트와 DOM이 다시 생성된다. 결국 연산하는과정과 렌더링을 다시해야 하기 때문에 속도가 느려질 우려가 있다.

3. key는 prop으로 받지 않는다.

컴포넌트에 작성해서 key도 prop같지만 prop으로 받을 수 없다. 따라서 key를 prop으로 내리려는 시도와 key라는 키워드로 prop을 생성해서도 안된다.

참고글

https://react-ko.dev/learn/rendering-lists#where-to-get-your-key