#2.1 Reusable Components with JSX + Props (컴포넌트에서 정보를 보내고 사용하는 법)

#2.1 Reusable Components with JSX + Props(컴포넌트에서 정보를 보내고 사용하는 법)

 

🍨 이번시간에는 컴포넌트에서 정보를 보내고, 정보를 사용하는 방법을 알아볼 것이다.

 

우리는 컴포넌트를 file을 이동하면서 작성하고 싶지 않기 때문에 App.js에서 컴포넌트를 작성하는 작업을 할 것이다.

 

import React from "react";

function Potato(){

  return <h1>I like Potato.</h1>;

}

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Potato />

    </div>

  );

}

export default App;

↑ App.js

이렇게 App.js 파일 하나에서 Potato 함수를 만들어서 사용할 수 있다.

 

🍨 JSX 에서는 컴포넌트에 정보를 보낼 수 있다! → 재사용성

JSX에서 두번째로 이해해야 하는 것은 component에 정보를 보낼 수 있다는 점이다.

react가 멋진 이유는 재사용 가능한 component를 만들 수 있다는 점이다.

이 말은 component를 계속해서 반복해서 사용할 수 있는 것이다.

 

저게 Potato가 아니라 Movie라고 생각해보자.

영화 20편이 있다고 했을 때 <Movie />를 20번 복사 붙여넣기 하는 식으로 사용하지 않는다. 동적으로 사용한다는 것이다.

 

이제 컴포넌트에 정보를 보내는 방법을 알아볼 것이다. 우선 Potato -> Food로 이름을 바꾼다.

이 어플리케이션(App)에서 food component로 정보를 보내고 그런 다음에 food component에서 그 정보를 어떻게 사용할지에 대해 배울 것이다.

 

🍨App에서 food 컴포넌트로 정보를 보내는 방법

 

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Food favorite="kimchi" />

    </div>

  );

}

 

다음과 같이 프로퍼티 = "값" 이렇게 넣어주면 된다.

HTML을 아는 사람이라면 이 동작 방법이 HTML이랑 되게 닮았다는 것을 알 수 있을 것이다.(마치 id나 class같은)

favorite이라는 이름의 property를 kimchi라는 value로 준 것이라고 생각하면 된다. 프로퍼티와 값에는 어떠한 것도 올 수 있다고 생각하면 된다.

 

property : favorite

value : kimchi

 

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Food favorite="kimchi" something={true} hello={["hello",1,2,3,4]}/>

    </div>

  );

}

어떤 형태라도 값으로 올 수 있다.

 

🍨food 컴포넌트에서 정보를 사용하는 방법

app에서 정보를 보냈으니 그 정보를 사용하여야한다.

 

import React from "react";



function Food(props){

  console.log(props);

  return <h1>I like Potato.</h1>;

}

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Food favorite="kimchi" something={true} hello={["hello",1,2,3,4]}/>

    </div>

  );

}

export default App;

 

우리가 작성한 프로퍼티들을 Food의 인자로 넣을 수 있다.

이것을 props라고 그냥 해놓고 console에 확인해보면, 다음과 같이 props는 이렇게 확인이된다.

 

 

function Food(props){

  return <h1>I like {props.favorite}</h1>;

}

우리는 저렇게 중괄호를 가지고 우리가 받아온 데이터를 사용할 수 있다.

⭐⭐⭐리액트에서 그냥 쓰면 html 코드 혹은 텍스트가 되고 중괄호 안에 쓰면 자바스크립트가 된다.

 

function Food({favorite}){

  return <h1>I like {favorite}</h1>;

}

ES6의 문법을 이용해서 (객체 비구조화 할당) 더 간단하고 멋지게 사용할 수도 있다.

 

function Food({favorite}){

  return <h1>I like {favorite}</h1>;

}

function App() {

  return (

    <div className="App">

      <h1>hello!!</h1>

      <Food favorite="Kimchi" />

      <Food favorite="Ramyeon" />

      <Food favorite="Tteokbokki" />

      <Food favorite="Chukumi" />

    </div>

  );

}

 

이렇게 해서 우리는 코드를 재사용할 수 있다.