[React] 리액트 - props 사용하기

안녕하세요. 이번 포스팅에서는 props를 사용하는 방법에 대해서 알아보도록 하겠습니다.

 

props는 properties의 약자로 특정 컴포넌트의 속성을 지정할 때 사용됩니다. props는 특정 컴포넌트를 불러와 사용하는 부모 컴포넌트(Component)에서 설정할 수 있습니다.

 

앞서 포스팅에서는 컴포넌트(Component)를 생성하는 방법에 대해 알아보았는데요. App Component가 MyComponent를 불러와 사용하는 형태로 MyComponent를 생성하였습니다.

이때 App Component가 MyComponent의 부모 컴포넌트(Component)가 되며 App Component에서 MyComponent에 대한 props를 지정할 수 있습니다. 아래 샘플 예제를 시작으로 props에 대해 알아보겠습니다.

---

1. props 지정하기

import React, { Component } from 'react';
import MyComponent from "./MyComponent";

class App extends Component {
  render() {
    return (
      <div className="App">
        <MyComponent name = "LKT Programmer"/>
      </div>
    );
  }
}

export default App;

▼ 먼저 MyComponent를 불러와 사용하는 부모 컴포넌트(Component)에 해당하는 App.js 코드입니다. <MyComponent name = "LKT Programmer"/>와 같이 MyComponent를 호출하는 부분에 props의 name의 속성값을 "LKT Programmer"로 지정하고 있습니다.

---

2. props 사용하기

import React, { Component } from 'react';

class MyComponent extends Component
{
    render(){
        return(
            <h1>Hello {this.props.name} </h1>
        )
    }
}

export default MyComponent;

▼ MyComponent에서는 부모 컴포넌트(Component)에서 지정했던 name 속성값을 사용 할 수 있습니다. props를 렌더링하기 위해서는 JSX 내부의 {} 안에 작성합니다. {}안에는 this.props.name을 이용하여 this 키워드를 통해 props의 name 속성값에 접근하는 것을 확인할 수 있습니다.

---

3. defaultProps 사용하기

부모 컴포넌트(Component)에서 props를 지정하지 않았을 때 미리 defaultProps를 통해 정의한 default 값을 사용할 수 있습니다.

import React, { Component } from 'react';
import MyComponent from "./MyComponent";

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

export default App;

▼ 먼저 MyComponent를 호출하는 부모 컴포넌트(Component)인 App.js에서 의도적으로 props를 지정하지 않은 채로 MyComponent를 호출하는 형태로 코드를 작성합니다.

import React, { Component } from 'react';

class MyComponent extends Component
{
    render(){
        return(
            <h1>Hello {this.props.name} </h1>
        )
    }
}

MyComponent.defaultProps = {
    name : "default"
}

export default MyComponent;

▼ 실제로 defaultProps를 통해 default 값을 지정하지 않았다면 브라우저에서는 Hello 다음에 공백이 나올 것입니다. 부모 컴포넌트(Component)에서 값을 지정해주지 않았으니깐요. 하지만 defaultProps를 통해 name의 default 속성값을 "default"로 지정해줌으로써 부모 컴포넌트(Component)에서 값을 지정해주지 않으면 defaultProps에서 지정한 값을 렌더링해줍니다. 아래는 브라우저에서 나오는 형태입니다.

---

4. propTypes를 통한 props 검증하기

propTypes를 통해 부모 컴포넌트(Component)로부터 지정된 props 속성을 검증할 수 있습니다. 필수로 지정되어야 할 속성이 지정되지 않았거나 특정 type에 대한 props가 다른 type으로 설정되었을 경우에 이를 검증할 수 있는 코드를 작성 할 수 있습니다. propTypes를 통해 검증 코드를 작성하는 방법은 위해서 사용한 defaultProps를 작성하는 법과 비슷합니다.

import React, { Component } from 'react';
import PropTypes from "prop-types";

class MyComponent extends Component
{
    render(){
        return(
            <h1>Hello {this.props.name} </h1>
        )
    }
}

MyComponent.propTypes = {
    name : PropTypes.string.isRequired
}

export default MyComponent;

▼ 먼저 propTypes를 사용하기 위해 propTypes를 import 합니다. 모듈 export 코드 위가 바로 propTypes를 통해 props를 검증하는 코드입니다. 해석하자면 'name 속성은 반드시 부모 컴포넌트(Component)에서 지정되어야 하며 Data Type은 String으로 지정하라'라는 의미로 해석할 수 있습니다.

import React, { Component } from 'react';
import MyComponent from "./MyComponent";

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

export default App;

▼ App Component에서는 의도적으로 name 속성을 Number Type로 지정하고 실행해보겠습니다. 

 

▼ 브라우저에서는 name의 type이 잘못되었다고 경고해주고 있습니다.