Props

Props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. 

 

JSX내부에서 props 렌더링

우선 MyComponent에서 name이라는 props를 렌더링하도록 설정해보자.

import React from "react";

const MyComponent = (props) => {
  return <div>안녕하세요. 제 이름은 {props.name}입니다. </div>;
};

export default MyComponent;

 

App컴포넌트에서 props의 값을 지정해 보자. App.js의 코드를 다음과 같이 수정해보자.

defaultProps는 값을 정했을 때 기본으로 보여주는 기본값을 설정하는 부분이다.

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

const App = () => {
  return <MyComponent name="React" />;
};

MyComponent.defaultProps = {
  name: "기본이름",
};

export default App;

 

태그 사이의 내용을 보여주는 children

children은 리액트 컴포넌트를 사용할 때 태그 사이의 내용을 보여주는 props이다.

MyComponent.js파일을 다음과 같이 수정해보자.

import React from "react";

const MyComponent = (props) => {
  return (
    <div>
      안녕하세요. 제 이름은 {props.name}입니다.
      <br />
      chiledren 값은 {props.children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본이름",
};

export default MyComponent;

App.js는 다음과 같이 수정해보자.

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

const App = () => {
  return <MyComponent>리액트</MyComponent>;
};

export default App;

 

비구조화 할당 문법을 통해 props 내부 값 추출하기

MyComponent에 props값을 조회할 때마다 props.name처럼 props를 앞에 붙여주고 있는데, 이러한 작업을 더욱 편하게 하기 위해 비구조화 할당 문법을 사용해보자. 

MyComponent.js를 다음과 같이 수정해보자.

import React from "react";

const MyComponent = (props) => {
  const { name, children } = props;
  return (
    <div>
      안녕하세요. 제 이름은 {name}입니다.
      <br />
      chiledren 값은 {children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본이름",
};

export default MyComponent;

이렇게 코드를 작성하면 name값과 children값을 더 짧은 코드로 사용할 수 있다. 이런 문법을 비구조화 할당, 구조 분해 문법이라고도 부른다. 

import React from "react";

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요. 제 이름은 {name}입니다.
      <br />
      chiledren 값은 {children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본이름",
};

export default MyComponent;

 

propsTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나, props의 타입을 지정할 때는 propsType을 사용한다. 

우선, propsType을 사용하기 위해 코드 상단에 import구문을 불러와야 한다. 

또한 코드 하단에 propsTypes부분을 적는다.

import React from "react";
import PropsTypes from "prop-types";

const MyComponent = ({ name, children }) => {
  return (
    <div>
      안녕하세요. 제 이름은 {name}입니다.
      <br />
      chiledren 값은 {children}입니다.
    </div>
  );
};

MyComponent.defaultProps = {
  name: "기본이름",
};

MyComponent.PropsTypes = {
  name: PropsTypes.string,
};

export default MyComponent;

이렇게 설정해주면, name값은 무조건 문자열 형태로 전달해야 함을 의미한다.