1. 리액트의 State

리액트를 공부하면서 발견된 아주 흥미로운것이 눈에 띄었는데
그것은 바로 State에 대한 내용이였다.

이 State가 변경되면 이에 따라 바뀐 내용으로 자동으로 렌더링 되는 것을 볼 수 있었으며
이를 보고 감탄하지 않을 수가 없었다.

(State 값만 바꿔 주면 알아서 척척 렌더링을 해주다니 이 얼마나 좋은 기능인가!)

2. 리액트의 State 사용해보기

일단 리액트의 State를 사용하려면 function 컴포넌트가 아닌 class 컴포넌트여야 한다.

(아 물론 리액트 Hook을 사용한다면 function 컴포넌트에서도 사용이 가능하다고 한다.)

아래의 예제 코드는 버튼을 눌렀을 때 true, false 를 서로 바꿔가면서 보여주는 코드이다.

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isOn: true };
  }
  changeState() {
    this.setState((state) => ({
      isOn: !state.isOn,
    }));
  }
  render() {
    return (
      <button onClick={this.changeState.bind(this)}>
        {this.state.isOn.toString()}
      </button>
    );
  }
}

일단 클래스로 된 App이라는 컴포넌트를 생성하였다.

그리고 해당 컴포넌트가 생성 될 때 constructor 함수가 실행이 되는데
이때 this.state 를 통해 객체 형식으로 state를 지정 한다.

이렇게 되면 현재 App 컴포넌트의 state는 isOn 이라는 state를 가지게 있게 된것이다.

그리고 render 함수가 실행되면서 현재 isOn state의 값의 이름을 사용하여 버튼을 하나 생성한다.

여기까지가 처음 컴포넌트가 실행 될 때의 과정을 담았다.

자 이제 버튼을 클릭 할 때는 어떻게 되는지 보자.

버튼을 생성할 때 onClick 즉, 해당 버튼이 클릭 되었을 때
해당 컴포넌트의 changeState 함수를 실행시킨다.

changeState의 함수는 setState 함수를 사용하여 isOn state 값을
기존 isOn의 값을 반전시켜 재할당 하는 모습을 볼 수 있다.

리액트에서 state값을 변경 시킬 때는 무조건 setState 함수를 써야한다.
(공식문서에도 그렇게 나오기 때문...)

이렇게 setState 함수를 사용하여 상태값이 변경되면
리액트는 이를 감지하여 다시 render 함수가 작동되고
버튼의 문자도 새로운 값으로 바뀌게 된다.

이를통해 리액트의 state를 잠시나마 짧게 알아보았다.

3. 후기

리액트의 state는 말그대로 컴포넌트의 상태 값을 가지고
해당 상태 값이 바뀌게 되면 다시 렌더링이 된다는 점과

state 값을 변경하기 위해서는 무조건 setState 함수를 써야한다는 점을 알았다.

그리고 이러한 과정들이 작동되는 과정을 보려면
리액트의 LifeCycle에 대해서 알아야하는데
우선 이 글에서는 짧게 state에 대해서 알아만 보도록 한다.

자세히 State와 LifeCycle에 대해서 알고 싶다면 아래 링크를 보길 바란다.
https://ko.reactjs.org/docs/state-and-lifecycle.html