[ React ] 동적 컴포넌트 생성 | Each child in a list should have a unique "key" prop 에러 해결

728x90

전 React 포스팅에서 했던 코드를 다시 불러와보겠다.

import React from "react";

function Butter({who}){
  return(
      <h1>Do you know {who}?</h1>    
  )
}

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      <Butter who='butter'/>
      <Butter who='Son'/>
      <Butter who='BTS'/>
      <Butter who='Twice'/>
      <Butter who='Psy'/>

    </div>
  );
}

export default App;

위 코드에서는, Butter 컴포넌트를 열심히 복사 해서 who 값을 다르게 넣었었다.

사실 위 코드도 그닥 효율적이라고 말할 수가 없다.

우리가 새로운 음식을 추가할 때마다 복붙을 해야하기 때문이다.

이번 포스팅에서는 웹사이트에 동적 데이터를 추가하는 방법을 다룰 예정이다.

1. 동적 데이터 추가하기

우리가 만드는 데이터는 이미 API에서 전달받았다고 가정하자.

나는 doYouKnow 라는 이름으로 이미지와 이름을 전달 받았다.

const doYouKnow = [
  {
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

이제 이걸을 어떻게 배열로 가져오고 자동으로 이름과 함께 렌더링 할 수 있을까?

자바스크립트 함수인 map 을 사용하겠다.

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter name={famous.name}/>)}
    </div>
  );
}

화살표 함수에 대해서 잘 모르는 사람을 위해 덧붙이자면,

famous 가 함수의 파라미터이고, 화살표 뒤의 내용이 함수의 내용이다.

모든 화살표 함수는 익명이다.

그리고, react 에서 {} 안의 내용은 자바스크립트 구문이다.

그렇기 때문에 map 이라는 자바스크립트 함수를 사용할 수 있는 것이다.

전체 코드이다.

import React from "react";

function Butter({name, img}){
  return(
      <h1>Do you know {name}?</h1>    
  )
}

const doYouKnow = [
  {
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter name={famous.name}/>)}
    </div>
  );
}

export default App;

실행하면 아래와 같이 출력된다.

아까 API 로부터 받은(받았다고 가정한) 이미지도 사용해보자.

import React from "react";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

이렇게 동적으로 컴포넌트를 만들 수 있다.

동적으로 컴포넌트를 생성하는 것은 여기서 끝났다.

map 을 조금 더 응용해보자.

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

현재 이 상태에서,

화살표 함수의 내용을 함수로 바꿔보자.

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(renderFamous)}
    </div>
  );
}

이름은 renderFamous 이다.

renderFamous 함수를 만들고 이 함수 안에 인자가 어떤것이 들어오는지 확인해보자.

function renderFamous(famous) {
  console.log(famous)
}

map 함수는 각각의 아이템(객체) 별로 함수를 호출한다.

테스트 해보자.

이렇게 Object 하나하나를 인자로 renderFamous 함수를 호출한다는 것을 알 수 있다.

우리가 원하는 건 Butter 컴포넌트의 리턴이기 때문에,

renderFamous 함수의 값을 아래와 같이 바꿔준다.

function renderFamous(famous) {
  return <Butter name={famous.name} img = {famous.img} />
}

실행해보면, 전과 같은 결과가 나타난다.

그냥, 화살표 함수 없이 이렇게도 사용할 수 있다는 것을 볼 수 있다.

import React from "react";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

다시 전에 썼던 코드로 들어가보자.

에러가 나는 것을 확인할 수 있다.

각각의 리스트의 child 는 유니크한 key prop 을 가져야한다고 경고하고 있다.

item 안에 id 를 추가해보자.

const doYouKnow = [
  {
    id : 1,
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    id : 2,
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    id : 3,
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    id : 4,
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    id : 5,
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

물론 우리는 이 doYouKnow 배열안의 객체들이 각각 다른걸 알고 있다.

그런데 리액트는 그걸 모르네 ㅋㅋ

아무튼, 이제 이 id 를 key 라는 prop 으로 추가해주자.

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter key = {famous.id} name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

이렇게 key 라는 이름의 prop 을 추가해줬다.

import React from "react";

function Butter({name, img}){
  return(
    <div>
      <h1>Do you know {name}?</h1>
      <img src={img} />
    </div>
         
  )
}

const doYouKnow = [
  {
    id : 1,
    name : "Butter",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.3ngupVxCT3OmGg5AkbyazwHaFe%26pid%3DApi&f=1"
  },
  {
    id : 2,
    name : "BTS",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.IsHrnAKvQqN3f5AVi0KU-wHaE8%26pid%3DApi&f=1"
  },
  {
    id : 3,
    name: "Son",
    img:
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.fLj_aPPfMYXtvG7Ttlbu_wHaEo%26pid%3DApi&f=1"
  },
  {
    id : 4,
    name : "Twice",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse1.mm.bing.net%2Fth%3Fid%3DOIP.OCSAST2D7gyP44mSoMo0dgHaFy%26pid%3DApi&f=1"
  },
  {
    id : 5,
    name : "Psy",
    img :
      "https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.6lhGd_oCuFgnm8x9OK7T6QHaE5%26pid%3DApi&f=1"

  }
]

function App() {
  return (
    <div>
      <h1>Halo!</h1>
      {doYouKnow.map(famous=> <Butter key = {famous.id} name={famous.name} img = {famous.img}/>)}
    </div>
  );
}

export default App;

전체 코드다.

실행시켜보도록 하자.

에러가 안난다.

멋지다!

728x90

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] ES6 : let 과 const 개념 \| let & const 공통점/차이점 (0)	2021.02.14
[ React ] ProtoTypes 설치하기 \| ProtoTypes install (0)	2021.02.13
[ JavaScript ] var & var hoisting(호이스팅) (0)	2021.02.12
[ React ] 재사용가능한 Component (0)	2021.02.11
[ React ] What is the component & jsx? \| How to create component (0)	2021.02.11

1. 동적 데이터 추가하기

'Archive > Develop' 카테고리의 다른 글

티스토리툴바