[React] props

본 글은 도서 '리액트를 다루는 기술'을 공부하며 정리한 글입니다.

1. props

props는 컴포넌트 속성을 설정할 때 사용하는 요소입니다. props는 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있습니다.

 

아래와 같이 <MyComponent> 컴포넌트에 properties로 전달되는 name값을 자식 컴포넌트인 Mycomponent가 props.name을 전달받습니다.

 

-app.js

import React from "react";
import "./App.css";
import MyComponent from "./components/myComponent";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <MyComponent name="React" />
      </header>
    </div>
  );
}

export default App;

 

-components/myComponent.js

import React from "react";

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

export default myComponent;

 

 

2. defaultProps

가령, 유저의 입력을 props값으로 사용하는 경우, 처음 들어온 유저의 입력값은 없기 때문에 빈칸을 출력하게 되는 경우가 발생하면 유저 입장에서는 당황스러울 수 있습니다. 

 

위와 같은 상황을 방지하기 위해, props값을 따로 지정하지 않았을 때 보여 줄 기본값을 defaultProps로 설정할 수 있습니다. 아래와 같이 MyComponent의 properties값을 지우고, defaultProps를 설정해주겠습니다.

 

-app.js

import React from "react";
import "./App.css";
import MyComponent from "./components/myComponent";

function App() {
  return (
    <div>
      <header className="App-header">
        <MyComponent />
      </header>
    </div>
  );
}

export default App;

 

-components/myComponent.js

import React from "react";

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

myComponent.defaultProps = {
  name: "첫방문",
};

export default myComponent;

 

 

3. Children

Children은 컴포넌트 태그 사이의 내용을 보여주는 props입니다. 아래와 같은 코드에서는, '반가워요.' 가 children으로 전달이 됩니다.

 

-app.js

import React from "react";
import "./App.css";
import MyComponent from "./components/myComponent";

function App() {
  return (
    <div>
      <header className="App-header">
        <MyComponent>반가워요.</MyComponent>
      </header>
    </div>
  );
}

export default App;

 

-components/myComponent.js

import React from "react";

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

myComponent.defaultProps = {
  name: "첫방문",
};

export default myComponent;

 

4. 비구조할당 props 내부 값 추출

props값을 조회할 때, props.name, props.children과 같이 props라는 키워드를 붙여줘야 하는 작업을 보다 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 추출해보겠습니다. app.js는 위와 같습니다.

 

-components/myComponent.js

import React from "react";

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

myComponent.defaultProps = {
  name: "첫방문",
};

export default myComponent;

 

5. propTypes를 통한 props 검증

propsTypes은 컴포넌트의 필수 props를 지정하거나, props타입을 지정할 때 사용합니다. 아래와 같이 선언해준다면, props의 name은 무조건 string 형태로만 전달해야 된다는 것을 의미합니다. 만약, 정수 값인 3을 name으로 전달해준다면 오류가 나게 됩니다.

import React from "react";
import PropTypes from "prop-types";    //prop-types 추가

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

myComponent.defaultProps = {
  name: "첫방문",
};

myComponent.propTypes = {
  name: PropTypes.string,
};

export default myComponent;

 

이번엔, 필수 props를 지정해보겠습니다. propTypes을 지정해줄 때 isRequired를 붙여 주면 됩니다. 아래와 같이 visitNum props는 무조건 number로만 받게끔 설정해주었고, 부모 컴포넌트로부터 무조건 전달받아야만 하게끔 isRequired을 붙여주었습니다.

 

-app.js

import React from "react";
import "./App.css";
import MyComponent from "./components/myComponent";

function App() {
  return (
    <div>
      <header className="App-header">
        <MyComponent name="React" visitNum={2}>
          반가워요.
        </MyComponent>
      </header>
    </div>
  );
}

export default App;

 

-components/myComponent.js

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

const myComponent = (props) => {
  const { name, children, visitNum } = props;
  return (
    <div>
      <h2>안녕하세요, 제 이름은 {name}입니다.</h2>
      <h2>{children}</h2>
      <h2>{visitNum}번째 방문이시군요!</h2>
    </div>
  );
};

myComponent.defaultProps = {
  name: "첫방문",
};

myComponent.propTypes = {
  name: PropTypes.string,
  visitNum: PropTypes.number.isRequired,
};

export default myComponent;

 

6. PropTypes 종류

위에서 사용했던 string, number와 같이 다양한 propTypes의 종류는 아래 링크에서 자세히 보실 수 있습니다.

 

facebook/prop-types