No.8 State

🤨 과제 하기전 state와 props 복습겸 다시 적어보려한다.

State

state = 상태라고 불리며, 컴포넌트의 상태값이라한다. state는 컴포넌트의 상태를 지니고 있는 객체이며, 데이터가 바뀔 때마다 효율적으로 화면에 나타내준다. 다음은 class 컴포넌트로 state를 나타내는 예제이다.

예제에서 나오는 construtor와 super에 대해서는 아래의 글을 보았다!
https://ko.reactjs.org/docs/react-component.html#constructor

import React from 'react';

class State extends React.Component {
  constructor(props) {
    super(props); {/*constructor & super는 초기화 과정이며, 둘은 필수로 들어가야한다 생각하면된다! */}
    this.state = {
      color: 'red'
    }; {/* this.state는 초기 상태의 컬러를 red로 지정 */}
  }

  render() {
    return (
      <div>
        <h1 style={{color: this.state.color}}>State</h1>
        {/* {} -> 자바스크립트라고 알리는것 {{}} 자바스크립트 안에 객체라고 알리는것! */}
      </div>
    );
  }
}

export default State;

this는 가리키는 대상(여기선 State)이며, this.state는 현재 컴포넌트의 state 객체라고 생각하고 코드를 이해하자! 따라서this.state.color의 의미는 State 컴포넌트의 color 값은 red라는 말과 같다.

💡 background color를 주고싶다면 js처럼 camal case를 이용해야한다 (= backgroundColor: 'red')

setState

state의 값은 직접 바꿀 수 없기 때문에 setState를 써준다고 생각하면되는데, 왜 직접 바꿀 수 없는지는 react의 동작원리를 생각해보면 된다! react는 가상 DOM을 사용해서 기존의 DOM과 차이점이 있다면 바뀌는 부분을 렌더링해서 보여주는데, 이때 state 값을 직접 바꿔버리면 react는 그 상황을 이해하지 못하고 렌더링을 하지 못한다.(🤪 편하지만 귀찮은 동네 바보 형 느낌인가..) 때문에 setState로 상태 값을 업데이트 해준다고 생각하면 된다. (setState는 우리가 임의로 정한 메서드가 아니라 react의 메서드이다!)

import React from 'react';

class State extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      color: 'red'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    }) {/* red에서 blue로 업데이트!! or 덮어씌운다! 라고 생각하자 */}
  }

  render() {
    return (
      <div>
        <h1 style={{color: this.state.color}}>State</h1>
        <button onClick={this.handleColor}>changeColor</button>
      </div>{/* onclick이 아니라 on'C'lick이다. */}
    );
  }
}

export default State;

위의 코드를 살펴보자! button을 클릭하면 handleColor가 호출이 되는데, handleColor는 setState함수를 불러낸다. setState는 앞서 언급했듯이 state의 상태를 업데이트한다 했으므로 state(= color)는 red에서 blue로 바뀐다.

코로나 백신 2차 맞고 이틀간 산송장같이 지냈는데... 진짜 힘들어 죽는줄알았다.. 다시 열심히 공부하는거로.. 😭😭😭😭😭