TIL. props

props

props는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용된다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때 props가 사용된다.

props 추가하기

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

header 컴포넌트와 content 컴포넌트가 props를 사용하도록 예제로 살펴보자

header.js

import React from 'react';
 

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

export default Header;

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

content.js

import React from 'react';
 

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

export default Content;

contentTitle와 contentBody props를 넣어주었다.

---

props사용하기

이제 app컴포넌트에도 props를 넣어주고, app컴포넌트에서 사용되는 props 값을 child 컴포넌트들로 전달해보자

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;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
 
const rootElement = document.getElementById('root');    
ReactDOM.render(<App headerTitle = "Welcome!"
                     contentTitle = "Stranger,"
                     contentBody = "Welcome to example app"/>, rootElement);

---

기본 값 설정하기

props 값을 임의로 지정해주지 않았을 때 사용할 기본값을 설정하는 방법을 알아보도록 하겠다.

기본값을 설정 할 땐, 컴포넌트 클래스 하단에 className.defaultProps = {propName: value}를 삽입하면 된다.

app.js

import React from 'react';
import ReactDOM from 'react-dom';
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;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
 
const rootElement = document.getElementById('root');    
ReactDOM.render(<App />, rootElement);