State 사용방법

Props를 앞에서 사용을 해보았고 밑에 그림과 같이 부모가 자식한테 주는 값이고 주는 방법은 컴포넌트 렌터링 할 때 특정 값을 설정해주는 방식으로 해준다라고 알고 넘어가자.

props

하지만 props는 자식입장에서는 읽기전용이다. 이거와 다른 개념인 State의 개념에 대해서 알아보자.

State는 컴포넌트 자신이 들고 있고, 변화가 필요하다 그러면 컴포넌트 내장함수 중에 setState()를 통해서 값을 설정해 준다.

state

codesandbox에서 Counter.js를 만들고 작성해본다. 작성한 다음 App에서 rendering해준다.

아래와 같이 Counter의 결과값이 보여지게 된다.

import React, { Component } from 'react';

class Counter extends Component {
  render() {
    return (
      <div>
        <h1>카운터</h1>
        <div>값: 0</div>
        <button>+</button>
        <button>-</button>
      </div>
    )
  }
}

export default Counter;

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

class App extends Component {
  render() {
    return <Counter />;
  }
}

export default App;

 

 

 

이제 작동하도록 구현을 해본다. Counter에 있는 값은 유동적이기 때문에 버튼을 클릭할 때 마다 리렌더가 되게 한다.

우선 Counter.js에서 state를 정의해주고 custom method를 만들어 주어서 동적으로 작동되게 한다.

 

아래와 같이 작성하면 절대 안된다. 컴포넌트에서 업데이트 됐는지 안됐는지 컴포넌트 자신이 모르기 때문에 이렇게 작성하면 안되고 setState를 이용한다.

  handleIncrease = () => {
    this.state.number = this.state.number + 1;
  }

 

this.setState를 이용해서 number값을 불러와준다. 그리고 버튼이 클릭됐을 때 호출되게 하려면 이벤트를 onClick을 이용해준다. 

여기서 render함수는 일반 함수처럼 작성했는데 handleIncrease와 handleDecrease는 화살표 함수로 작성했을까라는 궁금증이 생긴다.

import React, { Component } from 'react';

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

  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;

만약에 handleIncrease와 handleDecrease부분을 일반함수로 하게되면은 함수내부에서 this가 뭔지 모르게 된다.

아래코드를 보자. this가 undefined여서 에러가 나타나게 된다.

  handleIncrease() {
    console.log(this);
    this.setState({
      number: this.state.number + 1
    });
  }
  
  =>
  
// TypeError
// Cannot read property 'setState' of undefined

그래서 Constructor라고 해서 컴포넌트가 만들어질 때마다 호출되는 함수를 쓰면 된다. 그리고 위에서 extends Component 했기 때문에 컴포넌트가 가지고 있는 생성함수를 먼저 호출해 주어야 한다.

그래서 super props를 해주고 handleIncreas와 Decrease에서 사용되는 this가 바로 constructor에서 사용되는 this다라고 명시해주기 위해서 bind를 통해 코드를 작성해서 작동이 잘 되는 것을 확인 할 수 있다.

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

  constructor(props) {
    super(props);
    this.handleIncrease = this.handleIncrease.bind(this);
    this.handleDecrease = this.handleDecrease.bind(this);
  }

  handleIncrease() {
    console.log(this);
    this.setState({
      number: this.state.number + 1
    });
  }

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

하지만 애초에 arrow function을 사용한다면 매우 편리한 것을 알 수 있다.

import React, { Component } from 'react';

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

  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;

결론적으로

state는 컴포넌트 내부에 있고 컴포넌트 내부에서 바뀔 수 있는 값이고 값이 바뀔 때마다 컴포넌트는 re-rendering이 된다. 그리고 값을 바꿀 때에는 언제나 setState를 사용해야한다.

setState를 사용하지 않고 직접 바꾸게 된다면 re-rendering을 하지 않아서 사용자가 원하지 않는 값이 나타나게 된다.

 

 

props랑 비교하면 props는 자식한테 넘겨주는 값이고 state는 자기자신이 들고있는 값이고 변경할 수 있다는 것이다.

props는 읽기전용, states는 변경할 수 있다 

props & state

 

 

 

<출처 : velopert(김 민준) 누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌>

https://www.inflearn.com/course/react-velopert/dashboard

누구든지 하는 리액트: 초심자를 위한 react 핵심 강좌 - 인프런 | 강의