[React.js] Props

1. Props

Props는 부모 컴포넌트에서 자식 컴포넌트로 전달하는 값으로 Properties를 줄인 것이다.

부모 컴포넌트의 render 함수에서, return 값에 자식 컴포넌트를 JSX 문법에 따라 반환하는데, 이 때 자식 컴포넌트의 속성으로 전달되는 값이 props이다. 자식 컴포넌트 입장에서 이 Props는 읽기 전용이며, 객체 형태로 전달된다.

 

import React, { Component } from 'react';
import Child from './Component/Child';
    
class App extends Component {
  render() {
    return (
      <div>
          Hello, World!
          <Child 
            name="react!!!"
          />
      </div>
    );
  }
}

export default App;

부모 컴포넌트인 App에서 자식 컴포넌트인 Child를 import하고, render 함수의 return 값에 <Child> 컴포넌트를 전달한다. 그 속성(props)으로 name 값을 "react!!!"로 전달한다. 이 컴포넌트는 div 태그에 작성된 Hello, World! 뿐만 아니라, Child 컴포넌트를 마찬가지로 렌더링하고, name라는 props 값으로 react!!!를 전달할 것이다.

 

import React, { Component } from 'react';

class Child extends Component {
  render() {
    return (
      <div>
        My name is <b>{this.props.name}</b>
      </div>
    );
  }
}

export default Child;

전달된 props(name)의 값인 react!!!는 자식 컴포넌트에서 위와 같이 {this.props.name} 형태로 사용이 가능하다. 

 

 

출력해 보면 이와 같이, react!!! 값이 자식 요소에게 전달된 것을 확인할 수 있다.

 

 

2. DefaultProps

DefaultProps는 부모 컴포넌트에서 props의 값을 정해 주지 않았을 경우에 표시되는 props의 값이다.

 

import React, { Component } from 'react';
import Child from './Component/Child';
    
class App extends Component {
  render() {
    return (
      <div>
          Hello, World!
          <Child/>
      </div>
    );
  }
}

export default App;

위와 같이 부모 컴포넌트에서 props를 전달하지 않고 Child 컴포넌트를 렌더링한다고 하면

 

import React, { Component } from 'react';

class Child extends Component {
  render() {
    return (
      <div>
        My name is <b>{this.props.name}</b>
      </div>
    );
  }
}

export default Child;

자식 컴포넌트인 Child에 입력된 {this.props.name}은 전달받은 값이 없으므로, My name is 까지만 출력된다.

 

import React, { Component } from 'react';

class Child extends Component {
  static defaultProps = {
    name: 'unknown'
  }
  render() {
    return (
      <div>
        My name is <b>{this.props.name}</b>
      </div>
    );
  }
}

export default Child;

그러나 위와 같이 자식 컴포넌트에 defaultProps 값을 설정해 주면, 부모 컴포넌트에서 값을 입력받지 못한 경우에도 아래와 같이 name의 값을 출력할 수 있다.