4. State, Lifecycle

1. State

• 리액트 Component의 변경 가능한 데이터
• state는 개발자가 정의한다.
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다.
• JavaScript 객체
• state는 직접 수정할 수 없으며, 해서도 안 된다.
• 변경을 원할 경우, setState 함수를 통해 수정해야 한다.

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { //현재 컴포넌트의 state를 정의하는 부분
      liked: false
    };
  }
  
  ...
}

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

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

2. Lifecycle

• 리액트 Component의 생명주기
• Component는 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.
• mount : constructor(생성자) 실행
• update : props와 state 변경, rendering
• unmount : 현재 컴포넌트가 화면에 표시되지 않게 되는 시점