04) 컴포넌트 자세히 알기- map()

1. map()함수

1-1) map()함수란

- 배열의 함수로 사용

- 배열의 각 원소에 특정 함수를 적용하고, 그 함수의 반환값들을 다시 배열 형태로 반환

- 반환 값 : 리액트 컴포넌트를 반환

 

 

1-2) map()함수 사용하기 방법1

   - ILikeThat.map( box => (<Friends name = {box.name} picture = {box.image} />)) } 분석

       * {ILikeThat.map()} : ILikeThat배열의 각 원소를 특정 함수에 적용해서 배열 형식으로 반환하겠다. 배열 형식 반환이므로 {}I

        * box => () :  배열의 각 원소를 box에 담아서 ()함수에 적용하겠다.

        * <Friends name = {box.name} picture = {box.image} /> : Friends 컴포넌트를 실행하겠다. name,picture props로 각각 box의 name, image를 사용하겠다. 

 

 

1-2) map()함수 사용하기 방법 2

- {ILikeThat.map(renderFriends)} : map 함수의 인자로 renderFriends 함수 자체를 호출 가능

   - 결과

 

 

1-3) map()로 만든 컴포넌트에 key props 추가하기

- 리액트의 원소는 유일해야 함. 하지만 리액트는 Friends컴포넌트가 다르다는 걸 알 수 없음 =>> Friends 컴포넌트에 key props를 추가 ( 여기선 배열의 id값을 컴포넌트의 id값으로 저장)