React - 보충 학습 1: 부모/자식 컴포넌트, map 메소드, props

노마드코더 사이트: ReactJS로 영화 웹 서비스 만들기 강의를 통한 보충 학습

* 부모/자식 컴포넌트
* map 메소드를 활용한 동적인 컴포넌트 처리
* props 가 동작하는 과정
* props 에 대한 검증 방법
* 전체 코드 내용 정리(현재까지의 App 컴포넌트)

부모/자식 컴포넌트

부모 컴포넌트인 App 에서 자식 컴포넌트인 Food 에 props를 전달
부모 컴포넌트에서 자식 컴포넌트를 호출?하면서 전달할 props를 설정해 준다

function App() {
  return (
    <div className="App">

      {foodILike.map(eachFood => {  //부모 컴포넌트인 App 에서 자식 컴포넌트인 Food에 props를 전달
        return <Food name={eachFood.name} picture={eachFood.image} /> //동적으로 작동하도록 map 메서드를 사용
        // Food에 name, picture 라는 props를 전달하기 위한 구문
      })}
    </div>
  );
}

map 메소드를 활용한 동적인 컴포넌트 처리

부모 컴포넌트인 App 에서 자식 컴포넌트 Food 를 처리할 때, 만약 처리할 데이터가 가변적(동적)이라면?
하나하나 하드코딩할 순 없으니깐 -> map 메소드를 이용하여 동적으로 작동하도록 처리하는 것

-> 코드 구문은 위에 구문 참조

* 하드코딩하는 경우

<Food />    //이런식으로 자식 컴포넌트인 Food 를 일일이 코딩해야 한다
<Food />
<Food />
<Food />
...

props가 동작하는 과정

부모 컴포넌트에서 전달한 props (여기서는 name, picture 라는 2개의 props 가 존재)를 자식 컴포넌트에서 인자로 전달 받아서 사용하는 구조
자세한 작동 내용은 아래 주석을 참고

function Food({name, picture}) {  // (인자) 이런식으로 쓸 수도 있지만 { name } 이런식으로 쓰면 인자.name 할 필요없이 name 으로 값을 가져올 수 있음
  // console.log(name)         // 인자가 2개 이상인 경우 , 로 구분해서 나열해 쓰면 된다
  return (
    <div>
    <h1>I like {name}</h1>  {/* props 명이 name인 것의 값인 {eachFood.name} 을 가져온 것*/}
    <img src={picture} /> {/*props 명이 picture 인 것의 값인 {eachFood.image} 을 가져온 것 */}
  </div>
  )
}

props 에 대한 검증 방법

그런데 부모 컴포넌트로부터 전달받은 props가 우리가 원하는 props가 맞는지 어떻게 검증할까?

-> prop-types 라는 패키지를 설치하여 검증 가능 : 내가 전달받은 props가 내가 원하는 props인지를 확인해 줌

-> npm i prop-types

-> 우리가 사람이다보니 실수할 수 있는 부분들(이름을 잘못 쓴다든가...)을 알려준다!

 

반드시 컴포넌트.propTypes 의 이름으로 사용해야 하며, import 해서 쓴다.

Food.propTypes= { // prop-types를 사용하기 위한 설정 반드시 "컴포넌트.propTypes" 의 이름으로 써야한다 -> props 검사 용도
  name: PropTypes.string.isRequired,  // string 타입의 name값이 필요(만족?)되는가?(isRequired)
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired   //string타입의 rating값이 요구되는가? -> number이므로 콘솔에 경고해줌 -> number로 바꿔주자\
  // isRequired 같은 건 옵션이라보면 된다
  //prop-types는 이외에도 여러 응용이 가능(찾아보기)
}

전체 코드 내용 정리(작성한 App 컴포넌트)

위에서 작업한 부분에서 자식인 Food 컴포넌트에 rating이라는 props를 추가해주고 받을 때 인자에도 추가했다.

key라는 props도 추가했는데 이는 리액트 내의 모든 element는 유일해야 하므로 설정하는 props로, 자식에 전달되는 것이 아닌 리액트 내부적으로 동작시 사용하기 위한 목적이다 -> map 메소드 사용시 항상 쓴다고 보면 된다!

import React from "react";
import PropTypes from "prop-types"; // prop-types를 사용하기 위해 import


const foodILike = [ // 일종의 더미데이터용?
  {
    id: 1,
    name: "Kimchi",
    image: "https://kstory365.files.wordpress.com/2015/01/kimchi-01-cabbage.jpg",
    rating: 5
  },
  {
    id: 2,
    name: "bulgogi",
    image: "https://recipe1.ezmember.co.kr/cache/recipe/2016/12/30/df939769792632a48a0eba8bc895e8601.jpg",
    rating: 4.8
  },
  {
    id: 3,
    name: "kimbap",
    image: "https://recipe1.ezmember.co.kr/cache/recipe/2016/06/29/e7401296033ab8e4297cd53d71e1bba91.jpg",
    rating: 3.5
  },
  {
    id: 4,
    name: "samgyetang",
    image: "https://img.seoul.co.kr//img/upload/2019/07/25/SSI_20190725184016.jpg",
    rating: 4.6
  }
];
  

function Food({name, picture, rating}) {  // (인자) 이런식으로 쓸 수도 있지만 { name } 이런식으로 쓰면 인자.name 할 필요없이 name 으로 값을 가져올 수 있음
  // console.log(name)         // 인자가 2개 이상인 경우 , 로 구분해서 나열해 쓰면 된다
  return (
    <div>
    <h2>I like {name}</h2>  {/* props 명이 name인 것의 값인 {eachFood.name} 을 가져온 것*/}
    <h4>{rating}/5.0</h4>
    <img src={picture} alt={name}/> {/*props 명이 picture 인 것의 값인 {eachFood.image} 을 가져온 것 */}
  </div>
  )
}

Food.propTypes= { // prop-types를 사용하기 위한 설정 반드시 "컴포넌트.propTypes" 의 이름으로 써야한다 -> props 검사 용도
  name: PropTypes.string.isRequired,  // string 타입의 name값이 필요(만족?)되는가?(isRequired)
  picture: PropTypes.string.isRequired,
  rating: PropTypes.number.isRequired   //string타입의 rating값이 요구되는가? -> number이므로 콘솔에 경고해줌 -> number로 바꿔주자\
  // isRequired 같은 건 옵션이라보면 된다
  //prop-types는 이외에도 여러 응용이 가능(찾아보기)
}


function App() {
  return (
    <div className="App">
      
      {foodILike.map(eachFood => {  //부모 컴포넌트인 App 에서 자식 컴포넌트인 Food에 props를 전달
        return <Food key={eachFood.id} name={eachFood.name} picture={eachFood.image} rating={eachFood.rating} /> //동적으로 작동하도록 map 메서드를 사용
      })}
    </div>
  );
}

export default App;