[React] Props

Props

• 컴포넌트의 속성값
  => 부모 컴포넌트로 부터 전달받은 데이터를 지니고 있는 객체
• 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달가능
  => 문자, 숫자, 변수, 함수 등

Props 사용법

Parent.js

import React from "react";
import Child from "./Child";

const Parent = () => {
  const animal = "호랑이";
  
    return (
      <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <Child pet={animal} englishName="tiger" />
      </>
    );
};

default Parent;

Child.js

import React from "react";

const Child = (props) => {
  console.log()
  return (
  <>
    <h2>자식 컴포넌트입니다.</h2>
    <p>{props.pet}</p>
    <p>{props.englishName}</p>
  </>
  );
};

export default Child;

부모 컴포넌트에서 pet이라는 그릇에 담아 자식 컴포넌트로 데이터를 넘겨줄 수 있다.
변수 뿐만 아니라 문자열, 숫자, 함수 등 모든 데이터를 넘겨줄 수 있다.
보내주고자 하는 값이 여러개 일 때 공백을 추가하여 값을 구분하여 넘겨줄 수 있다.
부모 컴포넌트에서 전달해준 데이터는 하나의 객체로 합쳐져 자식 컴포넌트로 전달된다.
props는 객체형태로 들어온다.

---

함수를 props 하는 방법

Parent.js

import React from "react";
import Child from "./Child";

const Parent = () => {
  const animal = "호랑이";
  const hi = () => {
    console.log('HI!');
  };
  
    return (
      <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
      <button onClick={hi}>클릭</button>
      <Child pet={animal} englishName="tiger" />
      </>
    );
};

default Parent;

Child.js

import React from "react";

const Child = (props) => {
  console.log()
  return (
  <>
    <h2>자식 컴포넌트입니다.</h2>
    <p>{props.pet}</p>
    <p>{props.englishName}</p>
<button onClick={props.hi}>클릭</button>
  </>
  );
};

export default Child;