State and Lifecycle

state

• 리액트 컴포넌트의 변경 가능한 데이터
• state는 개발자가 정의한다
• 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함 시켜야 함 -> 불필요한 것 렌더링되어 성능 떨어짐
• state는 자바스크립트 객체이다.
• class 컴포넌트는 state를 생성자에서 정의

class LikeButton extends React.Component {
	constructure(props){
    	super(props)
      
      this.state = {
      	liked: false
      }
    }
  ...
}

• 함수형 컴포넌트는 useState라는 hook을 사용해서 정의
• state는 직접 수정 할 수 없다(하면 안된다)

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

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

LifeCycle

• 리액트 컴포넌트의 생명주기
• 클래스 컴포넌트의 생명주기
  
• 초록색 부분은 생명주기에 따라 호출되는 class component의 함수
• 이 함수들을 라이프사이클 매소드라고 부름

📌 Component가 계속 존재하는 것이 아니라, 시간의 흐름에 따라 생성되고 업데이 되다가 사라진다.

출생(Mount)

• 생성자 실행 : 컴포넌트의 state를 정의
• 컴포넌트 렌더링
• componentDidMount 함수 호출됨

인생(Update)

• 컴포넌트의 props 변경되거나
• setState 함수의 호출에 의해 state 변경되거나
• forceUpdate라는 강제 호출로인해 컴포넌트가 다시 렌더링 되는 경우가 생김
• componentDIdUpdate 함수가 호출됨

사망(Unmount)

• 상위 컴포넌트에서 현재 컴포넌트를 더이상 화면에 표시하지 않게 될때 언마운트
• componentWillUmmount 함수 호출됨