Props

Props

 

1. 정의

컴포넌트의 속성값을 의미한다 

부모 컴포넌트로부터 전달받은 데이터를 지니고 있는 객체이다 

tag에 속성을 주입하듯 전달하고자 하는 어떤 값이든 자식 컴포넌트에 전달 할 수 있다

문자, 변수, 함수 등

 

 

2. Props 사용해보기

 

하위컴포넌트로 전달하기

아래 코드를 예시로 Props를 사용 해보자 

 

// Parent.js(부모 컴포넌트)

import React from 'react';

const Parent = () => {
  const animal = '호랑이';

  return (
    <>
      <h1>부모 컴포넌트입니다.</h1>
      <p>{animal}</p>
    </>
  );
};

export default Parent;

 

 

하위 컴포넌트인 Child 컴포넌트가 있다고 가정하고 하고 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" />
    </>
  );
};

export default Parent;

 

전달 받은 하위컴포넌트는 아래와 같이 구현한다 

 

// Child.js(자식 컴포넌트)

import React from 'react';

const Child = (props) => {
  console.log(props);            // {pet: '호랑이', englishName: 'tiger'}

  return (
    <>
      <h2>자식 컴포넌트입니다.</h2>
      <p>{props.pet}</p>         // 호랑이
      <p>{props.englishName}</p> // tiger
    </>
  );
};

export default Child;

 

 

※

자식컴포넌트가 부모 컴포넌트에서 준 데이터를 받으려면

전달해준 데이터는 하나의 객체로 정해진다

매개변수의 이름은 마음대로 지을수 잇지만

부모컴포넌트로 받앗다는것을 표현하기 위해 

Props이름을 짓는 것이 컨벤션이다