[TIL] React <3> - State

State

state란 컴포넌트의 상태(state) 값이다.
state와 props 모두 object이고, 화면에 보여줄 상태를 가지고 있다는 점에서 비슷한 역할을 한다. props는 컴포넌트를 사용하는 부모에서 전달해야만 사용할 수 있다. state는 컴포넌트 내에서 정의한 후에 사용한다.

아래 코드는 버튼을 눌렀을 때, 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.reder(
    <Button />,
  	document.getElementById('root')
);

render() {
    return(
    	<div
          className="btn"
          onClick={()=>{this.setState({ clicked : !this.state.clicked})}}
        >
    )
}

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

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

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

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

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

Button 컴포넌트를 그리려면 this.state.clicked의 값이 필요하다. 최초에는 값이 없기때문에 constructor에서 값을 지정해줘야 한다. super()라는 키워드는 반드시 써줘야 한다. 그래야 React.Component 클래스에 있는 메소드(예 render)를 사용할 수 있다.