[React] 리스트

자바스크립트에서 배열을 순회하는 메서드인 map을 이용한다.

이 Images라는 컴포넌트에 blueImg1이 첫번째 ImageFrame 컴포넌트의 props로 들어가려하고 (빨간펜)

blueImg2가 두번째 ImageFrame 컴포넌트의 props로 들어가려 한다.(파란펜)

 

이런 상황에서 링크를 하나하나 써주는건 매우 비효율적이기 때문에 자바스크립의 map을 활용할거다! 

blueImg1과 blueImg2를 담는 리스트인 blue를 만든 후 하나씩 뽑아서 ImageFrame에 img props로 들어간다. 

 

근데 약간 문제점이 있다. 콘솔을 보면 Each child in a list should have a unique "key" prop 에러가 뜬다.

이건 배열을 순회할 때 배열마다 고유한 id값이 필요하기 때문이다. 그래야 최적화 해서 배열을 보여줄 수 있기

때문!

 

그래서 key도 blue로 설정해줬다. 왜냐면 blue 에는 이미지 url이 들어있기 때문이다