[React] 컴포넌트간 props 전달

일반적인 Props

컴포넌트 간 전달되는 매개변수를 props라 한다.

일반적으로 아래와 같이 선언하고 전달할 수 있다.

 

//호출
<Container name="pitter park" />


//컴포넌트 (반드시 대문자)
const Container = (props) => {
  return <div>{props.name}</div>;
};

 

 

태그 사이의 내용 children

<Container name="pitterPark">my name is</Container>


const Container = (props) => {
  return <div>{props.children + " " + props.name}</div>;
};

 

비 구조화 할당 (props를 세분화)

<Container name="pitterPark">my name is</Container>


//방법1
const Container = ({name, children}) => {
  return <div>{children + ' ' + name}</div>;
};


//방법2
const Container = (props) => {
  const {name, children} = props;

  return <div>{children + ' ' + name}</div>;
};

 

 

props default value 설정

import PropTypes from "prop-types"; //proptypes import



<Container />


const Container = (props) => {
  return (
    <div>
      {props.children || ""} //children이 undefined인 경우 공백 출력
      {" " + props.name}
    </div>
  );
};

Container.defaultProps = { name: "what is your name?" }; //기본 값

//name의 타입을 string으로 선언하고 반드시 입력받도록 함
Container.propTypes = { name: PropTypes.string.isRequired };

설정된 value에 어긋날 경우 개발자 도구의 consol에서 에러 문구가 발생함