5장. React State 사용

📌 State란?

• State는 각 컴포넌트가 가지고 있는 개별적인 상태값이다.
• 클래스형 컴포넌트를 작성할때는 해당 클래스 내부 맨 위쪽에 작성하는 것이 일반적이며 State는 객체이다.
• State는 '문자'나 '숫자'가 아닌 객체형태로 생성
• 값을 변경할 때는 언제나 setState라는 함수를 사용
• State에 데이터 저장하는 이유 : State가 변경되면 HTML이 자동으로 재렌더링 됨
  (HTML이 새로고침 없이도 스무스하게 변경됨)

📍 Props와 State

• 공통점

  • State는 Props처럼 App 컴포넌트의 렌더링 결과물에 영향을 주는 데이터를 갖고 있는 객체

• 차이점

  • State : 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리됨(변경 가능)
  • Props : 함수 매개변수처럼 컴포넌트에 전달되는 읽기전용
• Props를 사용했는데도 State를 사용하는 이유는, 사용하는 쪽과 구현하는 쪽을 철저하게 분리시켜서 양쪽의 편의성을 각자 도모하는 것에 있음

📝 실습 Code

• App.js

import React, { Component, Fragment } from 'react';
import Counter from './Counter';
//
class App extends Component {
  render() {
    return <Counter/>;
  }
}
//
export default App;

• Counter.js

import React, { Component } from 'react';
//
class Counter extends Component {
  //state는 문자 나 숫자가 아닌 '객체'로
  state = {
    number: 0
  };
  handleIncrease = () => {
    console.log(this.state);
    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;

• 일반 함수 사용식으로 쓰는 경우

  this를 인식하지 못 하여 추가 작업이 필요.

<< 예시 >>
constructor(props){
  super(props);
  this.handleIncrease = this.handleIncrease.bind(this);
  this.handleDecrease = this.handleDecrease.bind(this);
}

• 결과 Page

  

유튜버 출처 : Minjun Kim