smilehyeon

내 뒤에 돌을 하루에 하나씩 던지면 어느샌가 산이 되어있을 거야 :)

노마드코드님의 유튜브를 즐겨보는 구독자로서, 무료로 풀어두신 클론코딩 강의를 들어보고자 한다:)
드디어 본격적인 react 시작…!!
오늘은 map에 대해 알아볼 것이다🤩 🆂🆃🅰🆁🆃~~~~~
React로 영화 웹서비스 만들기
저번편은 여기로

Dynamic Component Generation 🐾

Dynamic Component_1

이전의 형태는 계속해서 바뀌는 데이터를 바로바로 반영하기 어렵다… 😰😰😰
새로운 음식이 추가될 때마다 코드를 복사 붙여넣기 해야하기 때문!!
그래서 웹사이트에 동적으로 반영해야 하는 방법이 필요하다.



보통 우리가 데이터를 받아올떄 API를 통한 경우가 많다.
API에서 데이터를 이미 받아온 경우라고 가정을 해보자.


const foodLike=[
  {
    name: "kimchi",
    image: "https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https:%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F27617836561AE05F2A.jpg"
  },
  {
    name: "meat",
    image: "https://a57.foxnews.com/a57.foxnews.com/static.foxnews.com/foxnews.com/content/uploads/2018/09/640/320/1862/1048/steakpanistock.jpg?ve=1&tl=1?ve=1&tl=1.jpg"
  },
  {
    name: "coffee",
    image: "http://www.indigofinance.com.au/wp-content/uploads/2018/07/istock-157528129.jpg"
  },
  {
    name: "cake",
    image: "https://www.superiorwallpapers.com/download/carpet-made-of-coffee-beans-delicious-muffin-and-coffee-2560x1440.jpg"
  }
]

가져온 데이터는 foodLike라는 이름으로 들어올 것이다.
그리고 foodLike가 저런 형태라고 온다고 보자.
보통 API를 통한 데이터는 map형태로 오는 경우가 많다.
map은 key와 value로 이루어져있고, key값을 기준으로 데이터를 구별한다.




Map🗺️

자, 검정고무신의 기영이가 있다고 보자.
기영이



기영이를 이루는 것에는 많은 것들이 존재하는데, 이름, 키, 좋아하는 것 등등이 있을 것이다.
여기서 이름, 키, 별명, 좋아하는 것 등이 바로 기영이를 이루고 있는 key값이 된다.
마치 업데이트 개념과 같다고 생각하면 편하다.
그것을 표현한다면 아래와 같은 형태가 될 것이다.


  {
    이름: "이기영",
    키: 135,
    좋아하는 것: "바나나"
  }

이렇게 key를 기준으로 원하는 데이터를 골라서 볼 수 있다.
그리고 key값은 중복되지 않는다.
기영이의 키가 135, 170 두개가 될 수 없는 것처럼 말이다.
기영이의 키가 변했다면, key값을 새로 만드는 것이 아닌 기존의 key값을 기준으로 value만 바꾸면 된다.
키: 170
요렇게~~~~!!!!



어쨌든~ 이런 map 들이 모여서 하나의 배열을 생성한다.
검정고무신의 각 인물들이 모여서 검정고무신을 완성하는 것처럼!
검정고무신 


const 검정고무신등장인물=[
  {
    이름: "이기영",
    키: 135,
    좋아하는 것: "바나나"
  },
  {
    이름: "이기철",
    키: null,
    좋아하는 것: "돼지고기 김치찌개"
  },
  {
    이름: "김도승",
    키: null,
    좋아하는 것: "기영이"
  },
]
//참고: 나무위키

바로 이런 형태가 될 것이다.




Dynamic Component_2

그럼 원래의 코드로 돌아가서~~~
우리는 foodLike라는 거대한 array를 가지고 있다.
그 안에는 name과 image를 키값으로 가지는 map형태가 들어있음.
각각의 map 값을 취해보자.


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

각각의 아이템을 dish라는 이름으로 취한다.
dish라는 각각의 object 안에는 name과 image라는 키값이 있을 거고!
그 키값을 기준으로 value를 얻는 것이다.
그렇게 얻은 value를 다시 name과 image라는 props에 넣어준다.
이 과정을 foodLike안의 모든 아이템에 적용하면 끝.
이렇게 만든 props를 받아주면 된다.



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

props를 렌더했다.😁
이렇게 해주면 I Like 음식이름이 나오고 사진이 짜라란 나올 것이다.(원본 사진이 커서 중간에 잘렸다…ㅎ)


image1

참고