props

props는 컴포넌트에서 컴포넌트로 전달하는 데이터를 말합니다.

 

컴포넌트 여러 개 사용해 보기

import React from "react";

function Movie() {
  return <h1>I love myday</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Movie />
      <Movie />
      (이후 16개의 Movie 컴포넌트 입력 생략...)
      <Movie />
      <Movie />
    </div>
  );
}

export default App;

앱을 실행하면 I love myday가 20개 출력됩니다.

이런 코드는 상당히 비효율적이고, 컴포넌트가 서로 다른 값을 출력해야 할 떄가 있으므로 컴포넌트를 데이터로 보내는 방법을 배워야 합니다.

 

props로 컴포넌트에 데이터 전달하기

import React from "react";

function Food() {
  return <h1>I love pasta</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="tomato" />
    </div>
  );
}

export default App;

 

위 코드가 props를 이용하여 Food 컴포넌트에 데이터를 보내는 방법입니다.

Food 컴포넌트에 사용한 props의 이름은 fav이고, fav에 "tomato"라는 값을 담아 Food 컴포넌트에 보낸 것입니다.

props에는 불리언 값(true, false), 숫자, 배열과 같은 다양한 형태의 데이터를 담을 수 있습니다.

여기서 주의할 점은 'props에 있는 데이터는 문자열인 경우를 제외하면 모두 중괄호({ })로 값을 감싸야 한다는 점'입니다.

import React from "react";

function Food() {
  return <h1>I love pasta</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="tomato" something={true} papapapa={["hello", 1, 3, 4, true]} />
    </div>
  );
}

export default App;

 

실행 결과

Food 컴포넌트에 props를 보내기만 할 뿐 아직 사용하지 않아 아무런 변화가 없습니다.

 

props 사용하기

import React from "react";

function Food(props) {
  console.log(props);
  return <h1>I love pasta</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="tomato" something={true} papapapa={["hello", 1, 3, 4, true]} />
    </div>
  );
}

export default App;

 

리액트 앱 화면은 아무런 변화가 없습니다.

console.log() 함수는 개발자 도구의 [Console] 탭에만 영향을 주는 함수입니다.

 

실행 결과

 

 

Food 컴포넌트에 전달한 props(fav, something, papapapa)를 속성으로 가지는 객체(Object)가 출력되었습니다.

 

props 다시 한 번 사용하기

import React from "react";

function Food(props) {
  console.log(props);
  return <h1>I love pasta</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="tomato" />
    </div>
  );
}

export default App;

 

실행 결과

 

Food 컴포넌트에 props에 있는 데이터 "tomato"를 화면에 출력하려면 props.fav를 중괄호로 감싸서 사용하면 됩니다.

import React from "react";

function Food(props) {
  return <h1>I love {props.fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="tomato" />
    </div>
  );
}

export default App;

 

실행 결과

 

객체에 있는 값을 사용하려면 점 연산자(.)를 씁니다.

fav props의 값을 사용하려면 props.fav와 같이 점 연산자를 사용하면 됩니다.

 

여러 개의 컴포넌트에 props 사용하기

import React from "react";

function Food({ fav }) {
  return <h1>I love {fav}</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Food fav="pasta" />
      <Food fav="ramen" />
      <Food fav="kimbap" />
      <Food fav="bibimbap" />
    </div>
  );
}

export default App;

 

실행 결과

 

 

Food 컴포넌트를 4개를 사용해 각 컴포넌트에 전달한 fav props를 출력했습니다.

각각의 fav props에는 서로 다른 값이 들어 있으므로 같은 컴포넌트를 사용해도 서로 다른 문장이 출력됩니다.

이것을 컴포넌트의 재사용한다고 합니다.

컴포넌트에 props를 전달하면 props에 있는 데이터가 하나의 객체로 변환되어 컴포넌트(함수)의 인자로 전달되고, 이걸 받아서 컴포넌트(함수)에서 사용할 수 있습니다.