#2.2 ~ 2.3 동적 데이터를 추가하는 방법 / map 함수 이용

#2.2 동적으로 데이터를 추가하는 방법

🍧 이번 시간에는 웹사이트에 동적 데이터를 추가하는 방법에 대해 알아보겠다.

🍧 지난시간처럼 복사 붙여넣기는 비효율적!

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Food favorite="Kimchi" />

      <Food favorite="Ramyeon" />

      <Food favorite="Tteokbokki" />

      <Food favorite="Chukumi" />

    </div>

  );

}

지난시간에는 컴포넌트를 이렇게 복사해서 붙여넣었기 때문에 효율적이지 않다.

왜냐하면 우리가 새로운 음식을 추가할 때마다 복사 붙여넣기를 해야하기 때문이다.

데이터를 우리가 처음부터 가지고 있던 데이터가 아니라 웹사이트에서 가지고 온 데이터라면 이렇게 할 수 없다.

 

데이터가 어떤 API를 통해 우리가 전달받는다고 상황을 가정한다.

따라서 할 일은 함수를 만드는 것이다.

 

const foodILike = [{

  name: "Kimchi",

  image:

    "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"

},

{

  name: "Samgyeopsal",

  image:

    "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"

},

{

  name: "Bibimbap",

  image:

    "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"

},

{

  name: "Doncasu",

  image:

    "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"

},

{

  name: "Kimbap",

  image:

    "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"

}]

API를 통해서 데이터를 받아왔다고 생각하고 이렇게 가상의 데이터를 만들었다.

 

이것을 어떻게 가져오냐면, 자바스크립트를 이용한다. 이것이 리액트가 단지 자바스크립트라고 말했던게 이거 때문이다.

 

🍧 Map 함수 이용하기

이제 여기서 자바스크립트의 map이라는 함수를 이용할 것인데, map은 array의 각 item에 함수를 실행하고 그 결과를 갖는 배열을 반환해주는 함수이다.

 

function App() {

  return (

    <div className="App">

      {foodILike.map((food) => 

        <Food name={food.name} image={food.image}/>)}

    </div>

  );

}

이렇게 코드를 작성한 후,

 

function Food({name, image}){

  return (

  <div>

    <h2>I like {name}</h2>

    <img src={image}></img>

  </div>

  );

}

이렇게 작성하면 된다!

 

사실 여기까지만 하면 콘솔창에서 확인해보면 에러가 난다. 이는 key를 추가하지 않아서 그렇다. 그것은 다음시간에 공부하도록 하겠다.

 

---

#2.3 map Recap - key 추가하기

 

🍭이번 시간에는 배열 안에 있는 리액트 컴포넌트의 유일성을 보장하기 위해 key를 추가해보겠다.

 

지난시간에 작성했던 코드는 사실 에러가 난다.

 

function renderFood(dish){

  return <Food name={dish.name} image={dish.image} />

}

function App() {

  return (

    <div className="App">

      {console.log(foodILike.map(renderFood))};

      {foodILike.map(renderFood)}

    </div>

  );

}

map함수로 실행시키게 되는 것을 콘솔로 확인해보면 어떨까?

뭔가 이상한 array가 보인다.

 

 

이것들은 기본적으로 리액트 컴포넌트이다.

그래서 우리가 foodILike.map(renderfood)를 하면 기본적으로 여기에 food 컴포넌트와 같은 array를 가져오게 된다. [<food /><food /><food />] 이런식

 

그리고 저 위의 에러를 보면, 각각 list 내의 child는 unique한 key prop을 가져야 한다고 말하고 있다. 이 말은, 모든 리액트의 엘리먼트들은 유일해야 하고, 이들을 list 안으로 집어넣을 때 이들은 유일성을 잃어버린다.

 

const foodILike = [{

  id: 1,

  name: "Kimchi",

  image:

    "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg"

},

{

  id: 2,

  name: "Samgyeopsal",

  image:

    "https://3.bp.blogspot.com/-hKwIBxIVcQw/WfsewX3fhJI/AAAAAAAAALk/yHxnxFXcfx4ZKSfHS_RQNKjw3bAC03AnACLcBGAs/s400/DSC07624.jpg"

},

{

  id: 3,

  name: "Bibimbap",

  image:

    "http://cdn-image.myrecipes.com/sites/default/files/styles/4_3_horizontal_-_1200x900/public/image/recipes/ck/12/03/bibimbop-ck-x.jpg?itok=RoXlp6Xb"

},

{

  id: 4,

  name: "Doncasu",

  image:

    "https://s3-media3.fl.yelpcdn.com/bphoto/7F9eTTQ_yxaWIRytAu5feA/ls.jpg"

},

{

  id: 5,

  name: "Kimbap",

  image:

    "http://cdn2.koreanbapsang.com/wp-content/uploads/2012/05/DSC_1238r-e1454170512295.jpg"

}]

 

따라서 id를 넣어주어야 한다.

 

function App() {

  return (

    <div className="App">

      {foodILike.map((dish)=> (

        <Food key={dish.id} name={dish.name} image={dish.image} />

      ))}

    </div>

  );

}

그리고 key에 id를 넣어주어야 한다.

 

결론

배열 안에 리액트 컴포넌트가 들어가게 되면 유일성을 잃어버리므로 key 프로퍼티를 추가해야 한다.

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.

key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

key로 지정할 만한 것이 없다면, map 함수를 사용할 때 설정하는 콜백함수의 두번째 파라미터인 index를 key로 사용하면 된다. ( array.map((element, index)=>)

 

참고

https://react.vlpt.us/basic/11-render-array.html

이것을 읽어보면 아주 도움이 된다.