[React] React "key" prop (react에서 배열 활용 시 발생하는 Warning 해결하기)

리액트를 공부하거나 작업하다 보면 배열를 활용하는 경우가 매우매우 많다.

보통 배열로열 이루어진 데이터를 map() 메서드를 통해 배열 요소들을 뽑아내는데,

이때, 기능은 정상적으로 작동하지만 콘솔에 Warning이 뜰것이다.

 

이 Warning 메시지를 읽어보면 "고유한 key prop이 필요"하다고 말해준다.

 

여기서 말하는 고유한 key prop이 뭘까?

또한, 이 Warning을 어떻게 해결할 수 있을끼?

 

이 글에서 알아볼 것

• key prop

 

1. key prop

위에서도 언급했지만,

배열을 정상적으로 렌더링 하려면 고유한 key prop이 필요하다.

왜 그럴까?

 

배열 데이터의 요소들을 렌더링하여 리스트를 만들고, 거기에 새로운 요소를 동적으로 추가한다는 상황을 가정해보자 

• 고유한 key prop이 없을때 작동 방식
  • 배열 리스트에 맨마지막에 추가된 요소가 추가된다
  • 그 후 모든 리스트를 재평가하여 코드에 작성되어있는 배열 순서에 맞춰 업데이트한다

=> 성능적으로 매우 안좋은 영향을 미친다

 

그럼 리액트에서 알려준 메시지대롤라면, 위의 문제를 해결해주는게 고유한 key prop이라는건데, 

어떻게 해결해줄까?

 

•  고유한 key prop이 존재할때 작동 방식
  • 배열 리스트에 맨마지막에 추가되는 것이 아니라, key prop이 어디에 추가되어야 하는지 알려준다

{props.expense.map((item) => {
          return <ExpenseItem key={item.id} title={item.title} amount={item.amount} date={item.date}></ExpenseItem>;
        })}

-> 컴포넌트 태그에 key 프로퍼티를 추가하고, 그 값으로 유니크한 값을 넣어줘야한다

 

결론

배열을 활용할때는 key prop을 추가해줘야 한다는 것을 항상 인지하자