[React] state 알아보기

State

state는 상태라는 뜻을 가지고 있습니다. 컴포넌트에서 상태는 컴포넌트가 살아있는 동안 변화가 가능한 객체입니다.

props와 헷갈릴 수도 있지만 명확히 구분하자면 props는 탑다운 방식으로 내려온 읽기 전용의 데이터의 느낌이라면, state는 컴포넌트가 소유하고 있는 고유의 값이라고 보면 될 것 같습니다.

선언하기

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

  render() {
    return (
      <button
        onClick={() => {
          this.setState({
            number: this.state.number + 1,
          });
        }}>
        +
      </button>
    );
  }
}

export default MyComponent;

state는 기본적으로 생성자 안에 생성해주게 됩니다. 이 때 중요한 점은 항상 초기 값이 있어야 한다는 점입니다.

현재 number는 0의 초기 값을 가지고 있게 하였습니다.

이렇게 생성된 state는 이제 MyComponent가 소유한 하나의 상태 값이 되는 것입니다.

 

만약 이게 조금 번거로우면 transform-class-properties문법을 사용해 생성자 외에서도 정의할 수 있습니다.

import React from 'react';

class MyComponent extends React.Component {
  state = {
    number: 0,
  };

  render() {
    return (
      <button
        onClick={() => {
          this.setState({
            number: this.state.number + 1,
          });
        }}>
        +
      </button>
    );
  }
}

export default MyComponent;

 

이렇게 되면 기존에 생성자에서 생성했던 것과 동일합니다.

변경하기

현재 button의 onClick을 통해서 + 를 클릭하면 number를 추가하는 예제를 구현하였습니다.

자세히 봤을 땐 기존과 다른 방식으로 업데이트 하는 것을 눈치 챌 수 있죠

바로 this.setState()를 통해 업데이트를 한다는 것입니다.

 

우리가 원래 하던 방식으로 접근해보면

this.state.number + 1

 

위 방식으로 하게 됩니다. 리액트 컴포넌트에서는 저렇게 접근한 state는 렌더링을 다시 하지 않습니다.

물론 forceUpdate()를 사용하여 업데이트가 가능하긴 하지만 리액트팀에서는 권장하지 않습니다.

 

또한 setState는 비동기로 동작하기 때문에 콜백 형식으로 사용하면 의도치 않은 결과 값을 만나는 것을 방지할 수 있습니다.

그래서 최종적으로 수정하면 아래와 같습니다.

import React from 'react';

class MyComponent extends React.Component {
  state = {
    number: 0,
  };

  render() {
    return (
      <button
        onClick={() =>
          this.setState((state) => ({ number: state.number + 1 }))
        }>
        +
      </button>
    );
  }
}

export default MyComponent;

기존 state를 받아서 state에 적용될 객체를 다시 담아주면 됩니다.

현재 Class Component 기준이지만, 만약 함수형 컴포넌트를 통해 useState를 사용하더라도 이 방식은 동일하게 작동합니다.