이번 시간에는 우리가 갖고 있는 영화 정보를 토대로 리스트를 만들어 보겠습니다.
지난 시간에 만든 리스트는 효율적 이지는 않기 때문입니다.
몇개의 영화를 갖고 있는지 모르는데 계속 복사 붙여넣기를 하면서 코딩을 할 수 없기 때문입니다.
향후에 API에서 긁어온 엄청난 양의 영화정보를 불러오고 싶을 때 , 어떻게 해야 할까요?
이 것을 해결하기 위해서 array (정렬된 항목)를 만들겁니다.
아래에서 코딩하는 작업 내용은 api에서 찾은 정보를 배열할 수 있는 array를 만드는 것입니다.
array를 만들기 전에 그 전 코딩 내용과 비교하기 위해서 전에 작성했었던 캡쳐파일을 확인해 보겠습니다.
위에 있던 movietitles 와 movieimages 그리고 App 컴포넌트 내용이 바뀌게 될 것입니다.
const movies = [
{
title : "Matrix",
poster : "http://ksassets.timeincuk.net/wp/uploads/sites/55/2017/03/matrix_reboot_1000-630x400-1.jpg"
},
{
title : "Full Metal Jacket",
},
{
title : "Oldboy",
},
{
title : "Star Wars",
},
]
class App extends Component {
render() {
return (
<div className="App">
</div>
);
}
}
const movies 라는 array를 추가하였으며, App 컴포넌트에 불필요한 내용도 삭제해주었습니다.
이제 array를 살펴보면서 최종 목록(list) 를 만들겁니다.
div 다음에 movies를 작성합니다. array들은 'map'기능 이라는게 있습니다.
구글 검색 에서 array map 을 검색해 보세요. 아래 링크를 참조하시기 바랍니다.
링크로 들어가보시면 Array.map() 에 대한 데모 와 실제 수행되는 결과창을 확인하실 수 있습니다.
Syntax도 확인할 수 있습니다.
간단한 예제들도 확인할 수 있습니다.
이제는 다시 코딩하는 창으로 돌아와보겠습니다.
div 아래에 movies는 array입니다. 그 다음 map 기능을 통해 새로운 array를 만드는 것입니다.
class App extends Component {
render() {
return (
<div className="App">
{movies.map(movie => {
return <Movie title={movie.title} poster={movie .poster} />
})}
</div>
);
}
}
복잡해 보이지만 map은 간단한 기능입니다.
우리가 지금 하는 작업은 movies array를 가져다가 맵핑을 해서(map) 새로운 array를 만드는 것입니다.
해당 moives array 안의 엘러먼트를 활용해서 movie => 부분의 current , 현재 우리가 작업하고 있는
movies array를 활용한다는 것이 포인트 입니다.
아까 syntax 부분을 보시면 current 부분이 우리가 작성한 movie 라는 것을 알 수 있습니다.
이번 시간에 코딩한 부분은 적었지만 중요한 기능에 대해서 배웠습니다.
그 전 시간에 코딩했던 내용보다 훨씬 줄어들면서
동일한 결과값을 map 기능을 통해서 얻을 수 있었습니다.
다음 시간에도 이어서 코딩을 해보도록 하겠습니다. 고맙습니다.