[React] State 사용법 ( + Props 와 비교 )

State란?

- state는 Component 내부에 있고 Component 안에서 바뀔 수 있는 값

- 값이 바뀔 때마다 Component는 리렌더링(개발자가 작성한 문서가 브라우저에서 출력되는 과정)됨

- 값을 변경할 때에는 setState라는 함수를 사용함

---

Props 와 State 비교

- Props는 부모가 자식한테 넘겨주는 값을

  State는 자기 자신이 가지고 있는 값을 의미한다. 

 

- Props는 읽기 전용, State는 수정도 가능

 

- 이때 State는 자기 자신이 가지고 있는 값을 변경할 수도 있다. (with. setState 함수)

---

State 사용법

1. State 을 이용한 카운터 만들기

State를 이용한 카운터 

 

(1) App.js 와 Counter.js 를 만듦

(2) Counter.js 내용

import React, { Component } from "react";

class Counter extends Component {
  state = {
    number: 0
  };

  handdleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  };
  handdleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  };
  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handdleIncrease}>+</button>
        <button onClick={this.handdleDecrease}>-</button>
      </div>
    );
  }
}
export default Counter;

(3) App.js 내용

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

2. State 카운터 구조 설명하기

App.js에 Counter.js에서 만든 Counter 함수를 사용하기 위해 아래의 코드를 사용한다

import Counter from "./Counter";

값이 변하므로 값 부분에는 숫자가 아닌 this.state를 사용해준다

<div>값 : {this.state.number}</div>

Counter의 number 초기값을 설정해준다

class Counter extends Component {
  state = {
    number: 0
  };

버튼을 눌렀을 때 number가 증가 감소 되어야 하므로 onClick 함수를 사용한다

<button onClick={this.handdleIncrease}>+</button>
<button onClick={this.handdleDecrease}>-</button>

그리고 this.handdle ... 를 정해주면 끝이다 'ㅁ' !

이때 위에서 말한 setState 함수를 사용해준다

화살표 함수 덕분에 this가 누구인지 따로 지정을 안해줘도 된다

(화살표 함수를 사용하지 않는 방법은 아래 참고)

handdleIncrease = () => {
    this.setState({
      number: this.state.number + 1
    });
  };
  handdleDecrease = () => {
    this.setState({
      number: this.state.number - 1
    });
  };

---

State 에서 this를 가르키는 다른 방법

handdleDecrease 와 handdleIncrease 의 setState를 생성하는 과정에서 화살표 함수를 사용하였다

화살표 함수를 사용하지 않게 되면 this가 누구를 가르키는지 알 수 없게 된다

 

화살표 함수를 사용하지 않으면서 this가 누구를 가르키는지 알게 하는 방법은 아래와 같다

 

import React, { Component } from "react";

class Counter extends Component {
  state = {
    number: 0
  };

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

  handdleIncrease() {
    this.setState({
      number: this.state.number + 1
    });
  };
  handdleDecrease() {
    this.setState({
      number: this.state.number - 1
    });
  };
  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값 : {this.state.number}</div>
        <button onClick={this.handdleIncrease}>+</button>
        <button onClick={this.handdleDecrease}>-</button>
      </div>
    );
  }
}
export default Counter;

주목할 부분은 이 부분이다

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

이 부분을 통하여 this가 누구인지 알려준다

 

- bind 메소드 : this를 가르키는 context를 변경하여 바로 실행시켜주는 메소드

- constructor ( ) 생성자 :

state 값을 초기화하거나 메서드를 바인딩할 때 사용함

this.props 사용시 생성자 내에서 정의되지 않아 버그 발생 가능성이 생기기 떄문에 super (props) 선언을 권장하고 있다