State(상태)

리액트에서의 State란
- 리액트 Component의 상태 -> 변경 가능한 데이터
- State는 각 개발자가 사전에 직접 정의
- 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함
- 불필요 정보 렌더링 시 성능에 부하

state는 JavaScript 객체이다.

ex)Like 버튼 컴포넌트

class LikeButton extends React.Component {
  constructor(props) { // 생성자
    super(props);
  
    this.state = { // 현재 클래스의 상태 정의. class컴포넌트의 경우 생성자의 내부에서 state를 정의한다
      liked : false
    };
    // state는 직접 수정 할 수 없다(하면 안된다)
  }
  ...
}

state 수정

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

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

state는 component의 렌더링과 관계있기 때문에
마음대로 수정시 개발자의 의도를 벗어날 수 있다

Lifecycle(생명주기)

사람 : 출생 -> 인생 -> 죽음
컴포넌트 : 생성 -> 사용(업글) -> 소멸

*출생(Mounting)
-> constructor : 생성자 실행, state 정의
-> render
-> (React updates DOM and refs)
-> componentDidMount(클래스 컴포넌트 함수, Lifecycle method(생명주기함수))

*인생(Updating) : 변화, 업데이트되는 과정
-> render(New props, setState(), forceUpdate()) : 새 속성, 상태변경, 강제호출(재렌더링)
-> (React updates DOM and refs)
-> componentDidUpdate

*사망(Unmounting) : 상위 컴포넌트에서 현재 컴포넌트를 화면에 더 이상 표시하지 않을 때
-> componentWillUnmount

Component가 계속 존재하는 것이 아니라,

시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.