리액트 - state

(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다.

 

state

• props와는 다르게 다른 곳에서 변경을 하면 html dom을 re rendering 시킴(props도 리렌더링 함)

• state 안에 데이터 값을 입력해 놓고 dom에서 사용

class BusinessName extends React.Component {
  constructor(props) {
    super(props);
    this.state = { brand: '한승욱짱' };
  }

  render() {
    // const { brand } = this.props;
    const { brand } = this.state;
    return (
      <div>
        {/* <h1>hello, {brand}</h1> */}
        <h1>hello, {brand}</h1>
      </div>
    );
  }

여기서도 비구조화를 통해 받아와야 된다는 에러가 뜨는데 대체 강사는

return <h1>{this.state.brand}</h1>

으로 어떻게 한건지 모르겠다... 귀신이 곡할 노릇이다...ㅋㅋㅋㅋ

비구조화 부분을 추가해주었다.

또한 아래의 contact 클래스에서는 props 부분을 지워주었다.

class Contact extends React.Component {
  render() {
    return (
      <div>
        <BusinessName />
        <ul className="list-group">
          <li className="list-group-item">An item</li>
          <li className="list-group-item">A second item</li>
          <li className="list-group-item">A third item</li>
          <li className="list-group-item">A fourth item</li>
          <li className="list-group-item">And a fifth one</li>
        </ul>
      </div>
    );
  }
}

조금 더 보충

• 버튼을 눌렀을 때 state가 변하면서 dom이 재 렌더링 되는 부분 확인

class BusinessName extends React.Component {
  constructor(props) {
    super(props);
    this.state = { brand: '한승욱짱', region: '경기' };
  }

  changeBrand = () => {
    this.setState({ brand: '승욱이' });
  };

  render() {
    // const { brand } = this.props;
    const { brand, region } = this.state;
    return (
      <div>
        {/* <h1>hello, {brand}</h1> */}
        <h1>
          hello, {brand}, 사는 곳은 {region}
        </h1>
        <button
          type="button"
          className="btn btn-primary"
          onClick={this.changeBrand}
        >
          Change Brand
        </button>
      </div>
    );
  }
}

• 버튼을 클릭하는 순간 changeBrand라는 function이 호출되고 그 안에서 setState를 통해 brand 변수값을 바꿔줌

정리

• props: 상위에서 하위의 컴포넌트를 호출할때 데이터를 넘겨줄 수 있는 방법

• state: 컴포넌트 안에서 글로벌하게 쓸 수 있는 오브젝트. 오브젝트 안에 데이터를 정의해서 dom 안에서 데이터를 쓸 수 있음. 해당 값을 바꾸려면 setState를 통해 바꿀 수 있음.