[React.JS] 강좌 5편 컴포넌트의 State 와 Props 사용하기

이 튜토리얼은 2018년에 새로운 강의로 재작성되었습니다 [새 튜토리얼 보기]

이번 강좌에서는 Component 에서 사용 할 데이터를 다루는 State 와 Props 에 대하여 알아보겠습니다.

1. 시작하기

강좌 4편 – Component 생성 및 모듈화 에서 사용하던 프로젝트를 계속해서 사용하겠습니다.

index.html

<!DOCTYPE html>
<html>

   <head>
      <meta charset="UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id="root"></div>
      <script src="bundle.js"></script>
   </body>

</html>

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);

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/>
                <Content/>
            </div>
        );
    }
}
export default App;

src/components/Header.js

import React from 'react';
 

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

export default Header;

src/components/Conent.js

import React from 'react';
 

class Content extends React.Component {
    render(){
        return (
            <div>
                <h2>Content</h2>
                <p> Hey! </p>
            </div>
        );
    }
}

export default Content;

2. props

props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용됩니다. parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때, props 가 사용됩니다. 예제를 통하여 이에 대하여 알아보겠습니다.

2.1 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 를 넣어주었습니다.

2.2 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);

2.3 기본 값 설정하기

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);

2.4 Type 검증(Validate)하기

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

한번 Content 컴포넌트의 propTypes을 지정 해 볼까요?

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>
        );
    }
}

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

export default Content;

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

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

자, 이제 App 컴포넌트에서 잘못된 값을 줘보도록 하겠습니다.

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: 5,
    contentBody: undefined
};

export default App;

contentTitle 엔 숫자를 지정하였고, contentBody에는 빈 값을 전달하도록 설정하였습니다.

Validation이 실패하면 브라우저에서 다음과 같은 오류가 나타납니다.

테스트가 끝나면 2.3 의 App.js 상태로 되돌리세요.

예제

예제를 통하여 여러 종류의 Type 를 Validate 하는 방법을 알아보도록 하겠습니다. (reference: React.js 메뉴얼)

import React from 'react';


class ValidationExample extends React.Component {
    /* ... */
}

Content.propTypes = {

    // JS primitive types
    optionalArray: React.PropTypes.array,
    optionalBool: React.PropTypes.bool,
    optionalFunc: React.PropTypes.func,
    optionalNumber: React.PropTypes.number,
    optionalObject: React.PropTypes.object,
    optionalString: React.PropTypes.string,

    // anything that can be rendered ( numbers, string, elements, array, fragment)
    optionalNode: React.PropTypes.node,

    // React element
    optionalElement: React.PropTyps.element,

    // instance of specific class
    optionalMessage: React.PropTypes.instanceOf(Message),

    // limited to specific values
    optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

    // one of many types
    optionalUnion: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.propTypes.number
    ]),

    // array of specific type
    optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

    // object with property values of a certain type
    optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

    // object with particular shape
    optionalObjectWithShape: React.PropTypes.shape({
        color: React.PropTypes.string,
        fontSize: React.PropTypes.number
    }),

    // Required function
    requiredFunc: React.PropTypes.func.isRequired,

    // Required prop with any data type
    requiredAny: React.PropTypes.any.isRequired,

    // custom validator
    customProp: function(props, propName, componentName) {
      if (!/matchme/.test(props[propName])) {
        return new Error('Validation failed!');
      }
    }
};
/* ... */

export default ValidationExample;

3. State

컴포넌트에서 유동적인 데이터를 다룰 때, state 를 사용합니다.. React.js 어플리케이션을 만들 땐, state를 사용하는 컴포넌트의 갯수를 최소화 하는 것 을 노력해야합니다. 예를들어, 10 개의 컴포넌트에서 유동적인 데이터를 사용 하게 될 땐, 각 데이터에 state를 사용 할 게 아니라, props 를 사용하고 10 개의 컴포넌트를 포함시키는 container 컴포넌트를 사용하는것이 효율적입니다.

3.1 기본적인 사용 방법

StateExample.js (미리보기: JSFiddle)

import React from 'react';

class StateExample extends React.Component {
   constructor(props) {
      super(props);

      this.state = {
         header: "Header Initial state",
         content: "Content Initial State"
     };
   }

   updateHeader(text){
       this.setState({
           header: "Header has changed"
       });
   }

   render() {
      return (
         <div>
            <h1>{this.state.header}</h1>
            <h2>{this.state.content}</h2>
            <button onClick={this.updateHeader.bind(this)}>Update</button>
         </div>
      );
   }
}

export default StateExample;

state 의 초기 값을 설정 할 때는 constructor(생성자) 메소드에서 this.state= { } 를 통하여 설정합니다.
state 를 렌더링 할 때는 { this.state.stateName } 을 사용합니다.
state 를 업데이트 할 때는 this.setState() 메소드를 사용합니다. ES6 class에선 auto binding이 되지 않으므로, setState 메소드를 사용 하게 될 메소드를 bind 해주어야 합니다. (bind 하지 않으면 React Component 가 가지고있는 멤버 함수 및 객체에 접근 할 수 없습니다.)

4. 적용: State 와 Props

유동적인 데이터를 렌더링하며, parent 컴포넌트와 communicate 하는 예제 컴포넌트 RandomNumber 를 만들어봅시다.

RandomNumber.js

import React from 'react';
import ReactDOM from 'react-dom';


class RandomNumber extends React.Component {
    updateNumber(){
        let value = Math.round(Math.random()*100);
        this.props.onUpdate(value);
    }

    constructor(props){
        super(props);
        this.updateNumber = this.updateNumber.bind(this);
    }

    render(){
        return (
            <div>
                <h1>RANDOM NUMBER: { this.props.number }</h1>
                <button onClick={this.updateNumber}>Randomize</button>
            </div>
        );
    }
}

export default RandomNumber;

랜덤 숫자를 나타내는 h1 element와, 클릭 하면 새로운 랜덤값으로 바꾸는 button element를 렌더링 합니다.

이 컴포넌트에서는 두가지 prop을 사용합니다.

number: 랜덤 값
onUpdate: function 형태의 prop 으로서, parent 컴포넌트에 정의된 메소드를 실행 할 수 있게 합니다.

코드 설명

Line 8: props 로 받은 함수를 실행합니다.
Line 11 ~ 14: React 컴포넌트의 생성자입니다. super(props) 로 상속받은 React.Component 의 생성자 메소드를 실행 한 후, 저희가 입력한 코드를 실행합니다.. 13번 줄에서는 update 메소드에서 this.props 에 접근 할 수 있도록 binding 을 해줍니다.
Line 20: 버튼을 클릭하였을 시 update() 메소드를 실행합니다.

이제, parent 컴포넌트인 App 컴포넌트에서 RandomNumber 컴포넌트를 사용해봅시다.

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import Content from './Content';
import RandomNumber from './RandomNumber';

class App extends React.Component {

    constructor(props){
        super(props);

        this.state = {
            value: Math.round(Math.random()*100)
        };

        this.updateValue = this.updateValue.bind(this);
    }

    updateValue(randomValue){
        this.setState({
            value: randomValue
        });
    }

    render(){
        return  (
            <div>
                <Header title={ this.props.headerTitle }/>
                <Content title={ this.props.contentTitle }
                          body={ this.props.contentBody }/>
                      <RandomNumber number={this.state.value}
                                  onUpdate={this.updateValue} />
            </div>
        );
    }
}

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

export default App;

코드 설명

Line 5: RandomNumber.js 를 import 합니다.
Line 12: 초기 state 를 설정합니다.
Line 16: updateValue() 메소드에서 this.setState 에 접근 할 수 있도록 bind 합니다.
Line 20~22: state 를 변경 할 때는 setState({key: value}) 메소드 를 사용합니다.
Line 31-32: RandomNumber 컴포넌트를 사용합니다.

출력물

마치면서..

props 와 state, 생긴건 비슷하지만 용도는 다릅니다. 헷갈리지 않도록 다음 특성을 기억하세요.

특성	props	state
parent 컴포넌트에 의해 값이 변경 될 수 있는가?	예	아니오
컴포넌트 내부에서 변경 될 수 있는가?	아니오	예

이 포스트에서 사용된 코드는 GitHub 에서 리뷰 할 수 있습니다.

다음 강좌에서는 비슷한 코드를 반복해서 렌더링할 때 사용 되는 keys 와 map 개념에 대하여 알아보겠습니다.