ReactJS - Lists with .map | NomadCoders | 프로그래밍 공부

* 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 

모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.*

저번 포스팅에서 만들어 본 영화 리스트 코드(아래)는 효율적이지 않다.

리스트가 같은 비슷한 형식의 코드의 복사-붙여 넣기 형태로 되어있기 때문.

리스트가 많아지면 곤란해질 수 있다.

API에서 긁어온 엄청난 양의 영화정보를 불러오고 싶을 때, 어떻게 해야 할까.

이를 위해, 배열(array)를 만들어보자.

배열 안에는 title, poster가 있다.

지금 하는 작업은 api에서 찾은 정보를 배열할 수 있는 array를 만드는 것이다. 

array 내의 map이라는 기능을 사용해보자.

map은 새로운 array를 만든다. 그것은 우리가 제공한 기능/명령의 결과 값이다.

map()을 하면 새로운 array가 생기는데, 다른 array의 엘리먼트를 포함한 값이다.

따라서 movies.map(movie => {

<Movie title={movie.title} poster={movie.poster} />}) 과 같이 입력해준다.

지금 하려는 것은 'movies' array를 가져다가, 맵핑을해서 (map)

해당 movies array 안의 엘리먼트를 활용해서 새로운 array를 만드는 것이다. 

여기서 현재 우리가 작업하고 있는 movies array를 활용한다는 것이 포인트이다.

출력되는 것을 보면, 다음 그림과 같이 정상적으로 출력된다.

정리를 하자면, array 하나를 자고, mapping을 해서(map)

그 array의 엘리먼트를 토대로 한 하나의 컴포넌트를 만드는 것이다.

따라서 아래 그림에서 위의 mapping과

아래의 복붙 코드는 동일한 의미이다.

array(정렬된 항목)을 선택 -> 해당 항목들을 맵핑 -> 우리가 설계한 모습의 새로운 리스트를 만듦.