[ TIL 36 ] React - Map과 Key

Map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 즉 새로운 배열 요소를 생성하는 함수.

이전에 map()에 대해 배웠을때 이게 왜 리액트에서 쓰일까라고 생각했는데
여러개의 컴포넌트를 렌더링 사용한다는 것을 알았다.

array.map(callbackFunction(currenValue, index, array), thisArg)

• callbackFunction : 새로운 배열 요소를 생성하는 함수.
• currentValue : 처리할 현재 요소.
• index Optional : 처리할 현재 요소의 인덱스.
• array Optional : map()을 호출한 배열.
• thisArg Optional : callback을 실행할 때 this로 사용되는 값.

# Map()을 이용해서 여러개의 컴포넌트 만들기

댓글 영역 반복시키기

{this.state.comments.map((item) => (
    <Comments
        key={item.length} //키값부여
        userId={item.userId}
        comment={item.comment}
  	>
    </Comments>
))}

피드 영역 반복시키기

{feedList.map((element) => {
	return (
    	<Feed
        	id={element.id} //키값 부여
            name={element.userId}
            count={element.count}
            img={element.img}
            title={element.title}
         />
       );
})}

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

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. -mdn

Key를 만들어줄 경우엔 대부분 id 값으로 키값을 만들어주는 경우가 많고,
항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다.

나는 키값을 부여해주고 map()을 사용해서
따로 에러메세지가 발생하지 않았지만
키값이 없는 상태로 map()을 사용하게 되면

Each child in an array should have a unique “key” prop.

이러한 에러메세지가 뜬다.

인덱스로 사용하는 것을 권장하지 않는 이유?

state로 배열을 관리하고 key로 index를 사용한다면 배열의 처음이나 중간에 새로운 데이터가 삽입될 시 그 부분만을 캐치하지 못한다. 삭제될 때도 마찬가지!