[ React ] [Chapter 5] State

State

이번엔 State를 알아보겠습니다 이것도 리액트의 아주 중요합니다.State는
컴포넌트 자기 자신이 들고 있는데, 만약에 변화가 필요하다 그러면 컴포넌트 내장 함수인 setState() 함수를 이용해 설정해 줍니다.
props 같은 경우는 부모가 자식한테 값은 전달해주는 즉 자식은 데이터 읽기만 가능했다면
State는 조금 다른 개념인 자기가 가지고 있고 읽기도 하고 쓰기도 하는것
즉 props 는 Reader 와 Writer이 나뉘어져 있다면 State는 하나로 뭉쳐진것이죠

 

State 사용해보기

새로운 컴포넌트를 만들자 글자는 ItJava.js로 만들었다.어떠한 이벤트로 카운터를 늘리고 줄이는 걸 만들어 보자 
이전에 설명 했듯이 state는 자기 자신이 변화를 가지고 있고 해당 데이터를 읽고 쓰기 한다고 했다. 해당 컴포넌트 안에 뷰에서 보여줘야할 랜더링 값과 이번트가 있어야할 함수를 작성 해준다
여기서 주의 할 점은 주석 처리 알려주기는 했지만 this.state.number로 데이터를 쓰면 안된다. 이럴 경우 컴포넌트에서 어떠한 값을 가지고 있는지 몰른다 그래서 컴포넌트가 제공 해주는 setState함수를 사용 해야 한다.
(다시 한번 말하지만 모든 자바스크립트를 쓸려면 {}가 들어가야한다 그래서 onClick 이벤트에 {this.handleIncrease})

import React, { Component } from 'react';

class ItJava extends Component {
  state = {
    number : 0
  }

  handleIncrease = () => {
    // 이렇게 해야함
    this.setState({
      number : this.state.number + 1
    })
    // 이렇게 하면 안됌
    this.state.number = this.state.number + 1;
  }

  handleDecrease = () => {
    // 이렇게 해야함
    this.setState({
      number : this.state.number - 1
    })
    // 이렇게 하면 안됌
    this.state.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 ItJava;

 

그리고 람다 처럼 생긴 형식의 () => {} 를 안쓰고 함수 형식으로 쓰고 싶다면
아래와 같이 해야한다. 컴포넌트에서 constructor함수를 제공 해주는데 이 함수는 컴포넌트가 만들어질 때 마다 호출 되는 함수이다. 이 함수에 해당 함수에 this를 바인드 해줘야한다.

안그러면 이벤트 함수는 this를 몰라서 널값을 뛰워서 에러를 표시한다.

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

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

 

 

이 state는 컴포넌트 내부에 있고, 컴포넌트 내부에서 바뀔 수 있는 값이며, 이 값이 바뀔 때 마다 컴포넌트는 리랜더링이 됩니다. 이 값을 바꿀 때는 꼭 setState() 함수를 써야한다 안쓰면 리랜더링을 하지 않아서 값을 모른다.

 

관련 글

저의 글을 읽어 주셔서 감사합니다. 오늘도 즐거운 하루 보내세요.

저의 글이 조금이나마 도움이 되셨다면 로그인이 필요 없는 공감♥ 한번 꾸욱 눌러주세요 하하~