[React] 컬렉션 형태의 데이터 출력

컴포넌트에 상태값을 주고 변경하는 것에 이어 다수의 데이터에 접근하는 것을 알아본다.

[React] 컴포넌트에 상태값 주고 변경하기

Booklist컴포넌트에는 두 개의 데이터를 불러오기 위해 BookCard컴포넌트가 두번 호출되었다.

실제로는 JSON형태의 수 많은 데이터를 다뤄야 하기 떄문에 일일히 컴포넌트와 속성을 적어주기는 힘들다.

 

컬렉션 데이터

네 개의 속성이 포함된 각 데이터를 세개를 나열하고 books에 저장한다.

다음으로 Booklist컴포넌트에 books속성에 나열된 데이터 books값을 준다.

 

컬렉션 데이터 출력

Booklist컴포넌트에 Bookcard를 일일히 호출하는 대신

현재 컴포넌트(this)의 속성(props)중 books에 map함수를 통해 각 인자에 접근한다.

각 인자 book은 각각 리턴을 하게 되는데 전달받은 book속성이

BookCard컴포넌트에 속성으로 전달된다.

일일히 속성을 전달받은 BookCard컴포넌트는 인자의 갯수만큼 할당된 map함수에 따라 호출된다.

컬렉션 데이터의 내용이 BookCard의 형식대로 나타난다.