리액트 기초- 5

리액트 기초- 5

(https://academy.nomadcoders.co/courses/enrolled/216871)

(https://www.youtube.com/watch?v=sM2p1EqTlw4&list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv)

노마드 코더 (Nomad Coders) 라는 분의 영상을 보고 배운 것을 정리한것입니다.

---

그럼

App.js

를 이렇게 수정 한 후 poster 이미지 도 자식 컴포넌트로 보내주면서!

Array.map을 사용해볼겁니다!

지금은 movies 배열의 내용이 4개뿐이지만

몇갠지 내가 알수가 없는 상황이거나 무수히 많을 경우

movies[0].title

movies[1].title

movies[2].title

movies[3].title

movies[4].title

....

코드도 길어지고 굉장히 번거로우니 그걸 해결해보겠습니다!

---

array.map 사용하기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

{movies.map(movie => {

return <Movie title={movie.title} poster={movie.poster} />

})}

movies는 배열입니다.

그 안에 title, poster 속성을 가진 객체(?)를 가졌습니다.

원래 그럼 접근 하려면

movies[0].title

movies[0].poster

하고 계속 계속 해야됩니다.

movies.map() 하면 movies의 배열 값을 순서대로 이용 할수있습니다.

movies.map(movie => {

함수 내부

}

movie의 안에는 지금 movies의 배열 값들이 차례로 들어와서 사용됩니다.

movie에 지금 {title:"test1", poster:"이미지1"} 이 생기고

=> 를 통해 movie를 함수 내부에서 사용할수있게 됩니다.

callback 함수이기 때문에!

return을 꼭 써주셔야합니다.

---

Movie.js

poster 이미지도 props로 적용해보고 결과를 확인하겠습니다.

---

확인

---

Warning 처리

배열의 값은 각각 고유한 key 값을 가져야한다!

리액트의 경우에는

element (요소)가 많을 경우 key라는 값이 필요합니다.

index는 movies안에서 각 element들의 index를 가져오게 됩니다.

test1 같은 경우 0번째이겠죠?

이렇게 수정하면 Warning은 사라집니다.