map()

map()이 하는 것은 렌더링이야.
배열의 각 아이템에서 함수를 실행한 그 결과값을 배열로 리턴해줘.

기존 friends라는 변수에는 배열 형태의 친구 5명이 있어.
내 친구들 이름 옆에 💖이모지를 넣어보자.

const friends = ["jurie", "sumin", "haesung", "dongmin", "mina"];

friends 배열을 만들어 내 친구들을 넣어줬어

map()이 하는일을 명확하게 확인해보자.
먼저 map()의 첫번째 인자값에 current라는 변수를 넣었어.
current처리할 현재 요소를 의미해.

friends.map(current => {
    console.log(current);
    return 0;
})

각 아이템을 콘솔에 한번씩 찍어주고 나서 0값을 리턴할거야.

image.png

이제, 내가 원하는 결과를 출력해볼게.

friends.map(friend => {
    return friend + " 💖";
})

image.png

동적 데이터를 바인딩

이제 리액트도 map()을 이용해서 동적으로 데이터를 바인딩 시켜보자.
먼저 API의 기능을 해줄 수 있는 foodILike 배열을 만들어볼게.
이 배열에는 음식에 정보가 들어가 있어.

const foodILike = [
  {
    name: "Kimchi",
    image: "https://media.giphy.com/media/3o7buimQCVB4ZOlwpq/giphy.gif"
  },
  {
  name: "Samgyeopsal",
  image: "http://giphygifs.s3.amazonaws.com/media/jgekcW3oyFCQU/giphy.gif"
  },
  {
    name: "Bibimbap",
    image: "https://media.giphy.com/media/YSZejk2mVdvjSqr230/giphy.gif"
  },
  {
    name: "Doncasu",
    image: "https://media.giphy.com/media/QaN5GJgjpi63WFmKU8/giphy.gif"
  },
  {
    name: "Kimbap",
    image: "https://media.giphy.com/media/wBELrJgO6ZtII/giphy.gif"
  }
];

그리고 이 정보에 대한 컴포넌트도 하나 만들자.
정보인 nameimageprops로 받을거야.

function Food({name, picture}){
    return <div>
        <h2>I like {name}</h2>
        <img src={picture} />
    </div>
}

그리고 렌더링 할 루트 컴포넌트인 App()에서
map()을 이용해 컴포넌트를 동적으로 출력해보자

function App(){
    return(
        <div>
            {foodILike.map(dish=>(
                <Food name={dish.name} picture={dish.image} />
            ))}
        </div>
    )
}

image.png

map Recap

Warning: Each child in a list should have a unique "key" prop.

리스트안에 아이템들은 각 유일한 key prop을 가져야해.
리액트의 모든 요소들은 유일해야하거든.
ID값을 추가해서 유일한 key prop을 갖게 해주자.

const foodILike = [
  {
    id: 1,
    name: "Kimchi",
    image: "https://media.giphy.com/media/3o7buimQCVB4ZOlwpq/giphy.gif"
  },
  {
    id: 2,
    name: "Samgyeopsal",
    image: "http://giphygifs.s3.amazonaws.com/media/jgekcW3oyFCQU/giphy.gif"
  },
  {
    id: 3,
    name: "Bibimbap",
    image: "https://media.giphy.com/media/YSZejk2mVdvjSqr230/giphy.gif"
  },
  {
    id: 4,
    name: "Doncasu",
    image: "https://media.giphy.com/media/QaN5GJgjpi63WFmKU8/giphy.gif"
  },
  {
    id: 5,
    name: "Kimbap",
    image: "https://media.giphy.com/media/wBELrJgO6ZtII/giphy.gif"
  }
];

그리고나서 <Food/> 컴포넌트에 prop을 전달하자.

function App(){
    return (
        {foodILike.map(dish => (
            <Food key={dish.id} name={dish.name} picture={dish.image} />
        ))}
    );
}

key prop은 <Food/> 컴포넌트에서 사용하지 않으니까 전달받지 않았어.
<Food/>컴포넌트는 수정하지 않아도 괜찮아.

function Food({name, picture}){
    return <div>
        <h2>I like {name}</h2>
        <img src={picture} alt={name} />
    </div>
}

아! 수정할게 있네.
image element에는 alt prop가 반드시 있어야해.