[React] map을 이용하여 배열 렌더링하기 - Key가 필요한 이유

 

 

 

Map을 이용한 렌더링

• arr.map(i => ) 의 형태로 하위 컴포넌트에게 값을 전달해줍니다.
• map() 함수는 배열안에 있는 각 원소를 변환하여 새로운 배열을 만들어줍니다. 리액트에서 동적인 배열을 렌더링해야 할 때는 이 함수를 사용하여 일반 데이터 배열을 리액트 엘리먼트로 이루어진 배열로 변환해주면 됩니다.
• 리액트에서 배열을 렌더링 할 때에는 key 라는 props 를 설정해야합니다. key 값은 각 원소들마다 가지고 있는 고유값으로 설정을 해야합니다.
• 만약 배열 안의 원소가 가지고 있는 고유한 값이 없다면 index 를 key 로 사용하시면 됩니다.

 

Map에서 Key가 필요한 이유

• Map에 key 값이없다면 중간의 값이 바뀌었을때 그 하위 값들이 전부 변하기 때문입니다. key값을 사용한다면 key를 이용해 중간의 값을 추가하게 됩니다.