[React]State & setState

Props와 State 차이

Props : 함수의 매개변수처럼 컴포넌트에 전달
State : 함수내에 선언된 변수처럼 컴포넌트 안에서 관리

setState

State의 값을 update하기 위해서 사용한다.
하지만 Class-Component와 Functional-Component에서 사용 차이가 있다.

Class Component State

import React, { Component } from "react";

class ClassCom extends Component {
  constructor(props) {
    super(props);
    this.state = {
      age: 20
    };
    //this.ageIncrease = this.ageIncrease.bind(this);
  }

  ageIncrease = () => {
    const { age } = this.state;
    this.setState({
      age: age + 1
    });
  };

  render() {
    return (
      <div>
        <h2>사용자</h2>
        <p>나이 : {this.state.age}</p>
        <button onClick={this.ageIncrease}>나이 늘리기</button>
      </div>
    );
  }
}

export default ClassCom;

Class-Component에서는 ageIncrease를 화살표함수를 써주지 않으면 위의 주석처럼 this.ageIncrease = this.ageIncrease.bind(this) 처리를 해주어야한다.

Functional Component State

import React, { useState } from "react";

export default function FuncCom() {
  const [age, setState] = useState(20);

  const ageIncrease = () => {
    setState(age + 1);
  };

  return (
    <div>
      <h2>사용자</h2>
      <p>나이 : {age}</p>
      <button onClick={ageIncrease}>나이 늘리기</button>
    </div>
  );
}

차이점

Class-Component는 구조화가 되어져 있고 this의 처리가 중요하다.
Functional-Component는 소스가 짧아지며 조금 눈에 잘들어오고 쉬워보인다.

정리

props를 통해서 컴포넌트의 데이터를 받아왔다면,
state를 통해서 컴포넌트 내부의 데이터를 업데이트하여 변경한다.
그 방법은 Class와 Functional 둘다 다르다.