[React] List 렌더링과 key

 

리액트에서는 유사한 형태의 여러 데이터를 순회형 데이터로 만들어 간편하게 JSX를 렌더링 할 수 있다.

 

배열 데이터 렌더링

 

콘솔에 key prop 에러가 뜬 것을 볼 수 있다. map() 메서드로 렌더링 된 JSX 요소들은 반드시 고유의 key 속성을 가지고 있어야 한다. 이는 추후에 데이터가 삭제, 수정될 때 기존의 순서나 불변 데이터를 올바르게 유지하기 위해 쓰인다. key 값은 같은 map() 메서드로부터 렌더링 되는 배열의 요소들 간에는 고유해야 하나, 다른 데이터나 배열로부터 렌더링 된 JSX 요소의 key 값과는 중복되어도 무관하다.

 

 

구조화된 데이터 필터링

 

데이터에 포함된 값을 key 값에 할당해 주었다. 그 외에 컴포넌트 내에서 uuid (crypto.randomUUID) 등과 같은 값을 생성해서 넣어주는 방법도 있다. 다만, key={Math.random()}과 같은 방식으로 키를 즉석에서 생성하는 것은 금물이다. 같은 요소에 대한 key 값이 변경되면 재렌더링 시에 키가 일치하지 않아 DOM tree가 처음부터 다시 그려지게 된다. 리액트의 가장 큰 장점이 훼손되는 것이다!