React - 상태(불변 상태 - props)

2019/03/13 - [전체] - React - 상태(가변 상태 - state)

리액트에서 불변 데이터를 전달하기 위한 가장 기본적인 방법은 속성(props)을 이용하는 것이다. 

리액트에서는 모든 컴포넌트가 속성을 수신할 수 있으며 constructor, render 메서드 및 생명주기 메서드들에서 활용할 수 있다. 

속성은 리액트 컴포넌트에 전달되는 데이터다. 

부모 컴포넌트가 전달할 수도 있고 컴포넌트 자체의 defaultProps 정적 메서드를 통해 전달할 수도 있다. 

속성은 보통 부모 컴포넌트가 전달한다. 

한 컴포넌트의 '상태'는 다른 컴포넌트의 '속성' 이 될 수 있다. 

일단 속성을 컴포넌트에 전달하면, 그 컴포넌트 내에서 속성값을 절대로 변경해서는 안 된다. 

PropTypes와 defaultProps 는 개발의 편의성을 위해 제공되는 도구이다. 

- PropTypes: 컴포넌트가 어떤 종류의 속성을 필요로 하는지를 명시하는 타입 확인 기능 제공

- defaultProps: 컴포넌트의 속성에 대한 기본값 정의 

속성을 이용하는 기본적인 소스코드를 살펴보자. 

import React from "react";
import { render } from "react-dom";
import PropTypes from "prop-types";
 
class Counter extends React.Component {
  static propTypes = {
    //#A
    incrementBy: PropTypes.number
  };
  static defaultProps = {
    incrementBy: 1
  };
 
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.onButtonClick = this.onButtonClick.bind(this);
  }
  onButtonClick() {
    this.setState(function(prevState, props) {
      return { count: prevState.count + props.incrementBy };
    });
  }
  render() {
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.onButtonClick}>++</button>
      </div>
    );
  }
}
 
render(<Counter incrementBy={1} />, document.getElementById("root"));