[react] props를 통해 component에 값 전달하기

props는 컴포넌트에서 컴포넌트로 전달하는 데이터다.

 

아래의 코드를 실행하면 화면에 Hello가 뜨게 된다.

import React, {Component} from 'react';
import './App.css';

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>Hello</h1>
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject></Subject>
      </div>
    );
  }
}

export default App;

 

Hello만을 출력하는 컴포넌트인 Subject가 아닌

내가 지정하는 값을 출력하는 Subject로 만들어 재사용성을 높이고 싶다면

props를 사용하면 된다!

- 클래스 컴포넌트

import React, {Component} from 'react';
import './App.css';

class Subject extends Component {
  render() {
    return (
      <header>
        <h1>{this.props.title}</h1>
      </header>
    );
  }
}

class App extends Component {
  render() {
    return (
      <div className="App">
        <Subject title="happy"></Subject>
        <Subject title="code"></Subject>
      </div>
    );
  }
}

export default App;

이렇게 작성해주면 화면에는 happy와 code가 뜨게 된다.

 

- 함수형 컴포넌트

import React, {Component} from 'react';
import './App.css';

function Subject(props) {
  return (
     <header>
        <h1>{this.props.title}</h1>
     </header>
   );
}

function App() {
  return (
    <div>
        <Subject title="happy"></Subject>
        <Subject title="code"></Subject>
    </div>
  );
}

export default App;

 

객체 인자를 구조 분해 할당하여 props를 받아 올 수도 있다.

function Subject(title) {
  return (
     <header>
        <h1>{title}</h1>
     </header>
   );
}

 

defultProps를 사용해 props의 초기값을 지정할 수 있다.

Subject.defaultProps = {
  title: 'hihi',
}

 

props-types 라이브러리를 통해 props의 타입을 지정하고 확인할 수 있다.

(타입이 다른 값 입력시 에러)

isRequired는 필수 입력 값이라는 뜻이다.

Subject.propsTypes = {
  title: PropTypes.string.isRequired,
}

 

 

클래스형 컴포넌트에서는 클래스 내부에서도 지정 가능하다.

class Subject extends Component {
  Subject.defaultProps = {
      title: 'hihi',
  };
  Subject.propsTypes = {
    title: PropTypes.string.isRequired,
  };
  render() {
    const { title } = this.props;
    return (
      <header>
        <h1>{title}</h1>
      </header>
    );
  }
}