Component의 State

state란 말 그대로 컴포넌트의 상태 값이다. state와 props는 둘 다 object이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter)처럼, state는 컴포넌트 내에서 정의하고 사용한다. state 이름은 원하는 대로 지을 수 있다.

코드를 읽으며 이해해보자!

class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className="btn"
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button />,
  document.getElementById('root')
);

onClick={()=>{this.setState({ clicked: !this.state.clicked })}}

• click하면 cliked라는 state를 수정한다. this.setState() 함수로 state를 업데이트 할 수 있다.
• !this.state.clicked 으로 업데이트 한다는 말은, 현재 clicked의 반대로 저장한다는 말이다. (true ➔ false, false ➔ true) 마치 라잌 Toggle!
• onClick이 달려있는 </div />를 클릭할 때마다, clicked 상태가 true나 false로 업데이트 된다.

{this.state.clicked ? ‘좋아요’ : ‘싫어요’}

• clicked state가 true면 "좋아요"를 보여주고, false면 "싫어요"를 보여준다.

constructor()

constructor는 class의 instance가 생성될 때 항상 호출되는 함수(생성자)이다. 초기화할 값들을 constructor에서 세팅해준다고 보면 된다.

constructor() {
  super();

  this.state = {
    clicked: false
  }
}

Button 컴포넌트를 그리려면 this.state.clicked 값이 필요한데, 제일 최초에는 값이 없으므로 constructor()에서 값을 지정해준다. super()라는 키워드는 꼭 작성해주어야 React.Component class에 있는 메서드들(ex.render)을 사용할 수 있다.

props와 state

class Button extends React.Component {

  constructor() {
    super();

    this.state = {
      clicked: false
    }
  }

  render() {
    return (
      <div
        className={`btn ${this.props.type === 'like' ? 'like-btn' : ''}`}
        onClick={()=>{this.setState({ clicked: !this.state.clicked })}}
      >
        {this.state.clicked ? '좋아요' : '싫어요'}
      </div>
    );
  }
}

ReactDOM.render(
  <Button type="like" />,
  document.getElementById('root')
);

<Button />에 type을 추가했고, Button 컴포넌트에서 props로 받을 수 있다. this.props.type이 "like"이면, like-btn이라는 class 속성이 추가된다.