JWT (4)

참고한 좋은자료

https://velog.io/@minju1009/reactmap-%ED%95%A8%EC%88%98-%EC%A0%81%EC%9A%A9%EC%8B%9C-key-props%EB%A5%BC-%EB%B6%80%EC%97%AC%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0

[react]map 함수 적용시 key props를 부여하는 이유

 

map 함수 적용시 key props를 부여하는 이유

Key란 React의 항목변경을 돕는 식별자이다.

 

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

 

React 트리 변환

서로 다른 타입

두 개의 트리를 비교할때, React는 Element의 루트(Root) 엘리먼트부터 비교합니다. 예를 들어 루트 엘리먼트가 <div>에서 <span>으로 변경되는 아래의 예시의 경우 <div>로 감싸져있는 Counter는 사라지고 <span>으로 감싸져있는 새로운 트리를 만들어낼 것입니다.

출처 https://sambalim.tistory.com/150

 

DOM 엘리먼트의 타입이 같은 경우 

같은 타입의 두 React DOM 엘리먼트를 비교할 때, React는 두 엘리먼트의 속성을 확인하여, 변경된 속성들만 갱신합니다.

style 의 경우는 변경된 style 만 갱신합니다.

출처: https://sambalim.tistory.com/150 [삼바의 성장 블로그]