[React] Props, State

1. Props

부모 컴포넌트에서 자식 컴포넌트에 값을 전달할 때 사용한다.

import React, { Component } from 'react';

class MyName extends Component {

  static defaultProps = {
    name: "기본값"
  }

  render () {
    return (
      <div>
        부모로 부터 받은 값은 <b>{this.props.name}</b>입니다.
      </div>
    )
  }
}

export default MyName;

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

class App extends Component {
  render() {
    return (
      <MyName name="부모값"/>
    );
  }
}

export default App;

 

 

 

2. 함수형 컴포넌트

컴포넌트를 만들 때 클래스를 이용하여 만들지만, 함수형 컴포넌트는 주로 기능이 없이 그대로 화면에 보여주는 경우에 사용한다. 함수형 컴포넌트는 초기 마운트 속도가 미세하게 더 빠르고 불필요한 기능이 없기 때문에 메모리 자원을 덜 사용한다는 장점을 가지고 있다.

import React from 'react';

const MyName = ({name}) => {
  return (
    <div>
      부모로 부터 받은 값은 <b>{this.props.name}</b>입니다.
    </div>
  )
};

MyName.defaultProps = {
  name: '기본값'
};

export default MyName;

 

 

 

3. State

State는 컴포넌트 자신이 가지고 있는데, 이는 내부에서 setState함수를 이용하여 변경할 수 있다.

import React, { Component } from 'react';

class Counter extends Component {

  state = {
    number: 0
  }

  // Arrow Function을 사용하지 않을 경우 'this' 인식을 할 수 없다.
  // 만약 일반 함수처럼 사용할 경우 constructor를 사용해야한다.
  /*
  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  */
  
  handleIncrease = () => { 
    this.setState({
      number: this.state.number + 1
    })
  }

  handleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    })
  }

  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: {this.state.number}</div>
        <button onClick={this.handleIncrease}>+</button>
        <button onClick={this.handleDecrease}>-</button>
      </div>
    );
  }
}

export default Counter;