[DEV] 리액트 02 - Props

2020/02/25 - DEV Story - REACT

경고

공부기록용임. 코드나 커리큘럼 방식 등 모든 지적 재산권은 노마드 코더에게 있으며, 무료로 볼 수 있으니 들어가서 여기서 공부할 것!! 갓 니콜라이 노마드 코더님 만세! https://academy.nomadcoders.co

Props

1.기본 Props 전달

function App() {
  return (
    <div className="App">
      // Component의 시작은 대애문자
      <Movie title="IronMan"></Movie>
      // App Component는 Movie Component에 title이라는 Property에 IronMan이라는 value값을 주었다.
      <Movie title="Batman"></Movie>
      // 여러개도 가능
    </div>
  );
}

// 이렇게 Object로 온다.
function Movie(props) {
  return <h1>Movie Title is {props.title}</h1>;
}

// es6로 이렇게하는 것도 가능
function Movie({title}) {
  return <h1>Movie Title is {title}</h1>;
}

2. 어…Dynamic! 구려.. 맞다 반복을 직접하다니 역겹기 그지없다.
API호출된 리스트를 동적으로 뿌려보자.

const movies = [
  {
    name: 'Iron Man',
    image: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpre04.deviantart.net%2F1d43%2Fth%2Fpre%2Ff%2F2017%2F050%2F9%2F8%2Fspider_man__homecoming___iron_man_poster_by_bakikayaa-dazn0du.jpg&f=1&nofb=1',
  },
  ......
]
// 이렇게 생긴 놈을 API에서 받아왔다고 치고 ~

function App() {
  return (
    <div className="App">
      {movies.map((movie) => {
        return <Movie name={movie.name} image={movie.image} />;
      })}
    </div>
  );
}
// for.map을 이용해서 반복시키고 Movie Component를 리턴한다.

function Movie({ name, image }) {
  return (
    <div>
      <h1>Movie Title is {name}</h1>
      <img src={image}></img>
    </div>
  );
}
// 대애애충 이렇게 받으면 끝 ngFor랑 비슷하구먼! 쉽네

무슨 에러가 뜨긴하지만 잘된다~

하.. 뭐래는거야.. 리스트에 모든 새끼들은 유니크한 키가 필요하다는군. 지가 하면될껄 에혀..

const movies = [
  {
    id: 1,
    name: 'Iron Man',
    image: 'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fpre04.deviantart.net%2F1d43%2Fth%2Fpre%2Ff%2F2017%2F050%2F9%2F8%2Fspider_man__homecoming___iron_man_poster_by_bakikayaa-dazn0du.jpg&f=1&nofb=1',
  },
  ...
] // 이렇게 id를 만들어주고

function App() {
  return (
    <div className="App">
      {movies.map((movie) => {
        return <Movie key={movie.id} name={movie.name} image={movie.image} />;
        // key라는 prop에 id값을 넣어주면된다.
        // 이 key 값은 Movie Component에서 받아서 쓰지 않아도 된다. 내부적으로만 사용한단다..
      })}
    </div>
  );
}

멋지게 잘반복한다. 쉽네 쉬워

3. Props Type 근데 반복은 좋은데 만약에 Movie Component에 Prop을 잘못 보내거나 없는걸 보내면 어떻게하지?

npm i prop-types

설치!

import PropType from 'prop-types';

// 레이팅을 추가함.
function Movie({ name, image, rating }) {
  return (
    <div>
      <h1>Movie Title is {name}</h1>
      <img src={image} alt={name}></img>
      <p>{rating} / 5</p>
    </div>
  );
}

Movie.propTypes = {
  name: PropTypes.string.isRequired,
  image: PropTypes.string.isRequired,
  rating: PropTypes.number
}

function App() {
  return (
    <div className="App">
      {movies.map((movie) => {
        return <Movie 
          key={movie.id} 
          name={movie.name} 
          image={movie.image} 
          rating={movie.rating}/>;
      })}
    </div>
  );
}

Movie Component에 Props를 던져줄 때 마다, PropTypes가 체크해주고 없으면 디폴트 값까지 만들어서 던져준다. typescript에 있는 기능 처럼 매우 좋은 녀석인듯.

대문자 소문자가 매우 햇갈려서 초반에 어리버리 탈 수 있음.