What is state?

state는 컴포넌트의 상태 값을 말합니다. state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는게 매우 비슷합니다.

밑에 example은 버튼을 눌렀을 때, state를 변화시켜서 보여줘야할 텍스트를 바꾸는 코드입니다.
click이라는 하나의 state 있지만 여러 개의 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')
);

위에 example에서 onClick은 이벤트를 공부할 때 더 알아보기로 하고 지금은 <div />를 클릭하면 onClick에 넘긴 함수가 실행된다고 이해하자.

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

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

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

• clicked state가 true면 '좋아요'를 보여주고 false면 '싫어요'를 보여줍니다.

constructor 메서드는 class 내에서 객체를 생성하고 초기화하기 위한 특별한 메서드입니다.

constructor() {
  super();
  this.state = {
    clicked: false
  }
}

Button 컴포넌트를 그리려면 this.state.clicked 값이 필요한데, 제일 최초에는 값이 없으므로 constructor에서 값을 지정해줍니다.