State (상태)

리액트 Component의 변경 가능한 데이터 = State

웹사이트를 이용하다 보면, 사용자의 입력이나 시간에 따라 변하는 요소들을 확인할 수 있다. 이런 변화하는 요소들을 State로 취급한다.

렌더링이나 데이터 흐름(=변화)에 사용되는 값만 State에 포함시켜야 함!

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    
    // 그냥 JS 객체
    this.state = {
      liked: false
    };
  }
  
  ...
}

State는 직접 수정할 수 없다

State는 기본적으로 생성할 때에만 설정할 수 있고, 그 외의 상황에는 setState를 통해 변경해줘야 안전하다.

// state를 직접 수정 (잘못된 방법)
this.state = {
  name: 'Inje'
}

// setState 함수를 통한 수정 (정상적인 방법)
this.setState({
  name: 'Inje'
});

LifeCycle (생명주기)

기본적인 LifeCycle 매서드

---

Referance

[인프런] 처음 만난 리액트(React) 강의 - 소플