[React] Component 에서 props 사용하기-떽떽대는 개발공부

2020/12/31 - [React] - [React] Component 생성하고 모듈화하기

[React] Component 생성하고 모듈화하기

 

 

 

props

props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용한다. 

parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용된다. 

 

props 추가하기

컴포넌트에서 변하지 않는 데이터가 필요 할 땐,
render() 메소드의 내부에 안에 { this.props.propsName } 형식으로 넣고,
컴포넌트를 사용 할 때, < > 괄호 안에 propsName="value" 를 넣어 값을 설정한다.

 

src/components/Header.js

import React from 'react';
 
class Header extends React.Component {
    render(){
        return (
            <h1>{ this.props.title }</h1>
        );
    }
}

export default Header;

 

src/components/Content.js

import React from 'react';
 
class Content extends React.Component {
    render(){
        return (
            <div>
                <h2>{ this.props.title }</h2>
                <div> { this.props.body } </div>
            </div>
        );
    }
}

export default Content;

 

위와 같이 props 값이 렌더링 될 위치에 { this.props.propsName } 를 넣는다.

 

props 사용하기

이제 App 컴포넌트에도 props 를 넣어주고, App 컴포넌트에서 사용되는 props 값을 child 컴포넌트들로 전달한다.

src/components/App.js

import React from 'react';
import Header from './Header';
import Content from './Content';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header title={ this.props.headerTitle }/>
                <Content title={ this.props.contentTitle }
                          body={ this.props.contentBody }/>
            </div>
        );
    }
}

export default App;

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App headerTitle = "This is headerTitle"
         contentTitle = "This is contentTitle"
         contentBody = "This is contentBody"/>
  </React.StrictMode>,
  document.getElementById('root')

 

결과

props 기본 값 설정하기

 

props 값을 임의로 지정해주지 않았을 때는 기본값을 설정할 수 있다.

기본값을 설정 할 땐, 컴포넌트 클래스 하단에 아래와 같이 삽입한다.

className.defaultProps = { propName: value }

 

src/components/App.js

import React from 'react';
import Header from './Header';
import Content from './Content';

class App extends React.Component {
    render(){
        return  (
            <div>
                <Header title={ this.props.headerTitle }/>
                <Content title={ this.props.contentTitle }
                          body={ this.props.contentBody }/>
            </div>
        );
    }
}

App.defaultProps = {
    headerTitle: 'Default header',
    contentTitle: 'Default contentTitle',
    contentBody: 'Default contentBody'
};

export default App;

 

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

 

결과

Component 의 props Type 설정 및 필수값 지정

컴포넌트 에서 원하는 props 의 Type 과 전달 된 props 의 Type 이 일치하지 않을 때 콘솔에서 오류 메시지가 나타나게 하고 싶을 땐, 컴포넌트 클래스의 propTypes 객체를 설정할 수 있다.

또한, 이를 통하여 필수 props 를 지정할 수 있다.

src/components/Content.js

import React from 'react';
 
class Content extends React.Component {
    render(){
        return (
            <div>
                <h2>{ this.props.title }</h2>
                <div> { this.props.body } </div>
            </div>
        );
    }
}

Content.propTypes = {
    title: React.PropTypes.string,
    body: React.PropTypes.string.isRequired
};

export default Content;

 

두 props 의 Type 를 모두 string 을 지정하고,

body는 .isRequired 를 추가하여 필수 props 로 설정한다.

 

만약 App 컴포넌트에서 Content 컴포넌트로 잘못된 값을 전달하면 오류가 발생하게 된다.