state 생명주기 (클래스형,함수형)

`·2022년 2월 6일

React의 모든 컴포넌트는 아래의 세가지 단계를 거친다 .
초기화 단계
업데이트 단계
소멸단계

각 단계에서 몇개의 메서드들이 정해진 순서대로 작동하며 각 단계 속에서 호출되는 메서드들을 생명주기 메서드 라고 한다

최초에 컴포넌트 객체가 생성 될 때 한번 수행된다.

Constructor() :
메소드를 바인딩하거나 state(상태)를 초기화 하는 작업이 없다면 constructor(생성자)가 없어도 된다 .
react 컴포넌트의 constructor(생성자)는 해당 컴포넌트가 마운트 되기 전에 호출된다.
생성자를 구현하면 this.props가 생성자 내에서 정의 되도록 super(props)를 호출해야 한다.
state의 값을 변경하고자 한다면 , constructor() 외부에서 this.setState()를 통해 수정해야 한다.
render()
Class 컴포넌트에서 반드시 구현되어야 하는 유일한 메소드이다.
호출되면 this.props와 this.state의 값을 활용하여 값을 변환한다 .
render()함수는 컴포넌트의 state를 변경하지 않고 호출 될 때마다 동일한 결과를 반환하며 브라우저와 직접적인 상호작용을 하지 않는다.
componentDidMount()
컴포넌트가 마운트 된 직후에 호출된다
DOM 노드가 있어야 하는 초기화 작업이 이루어지면 좋다 .
외부에서 데이터를 불러와야 한다면 네트워크 요청을 보내기 좋다.

업데이트 단계는 컴포넌트가 마운트 된 이후 컴포넌트의 속성값(props) , 상태값 (state)이 변경되면 실행 된다 .

소멸단계에서는 컴포넌트가 소멸 할 때 실행된다.

componentWillUnmount()
컴포넌트가 마운트 해제되어 제거되기 직전에 호출 됩니다
타이머 제거, 네트워크 요청 취소, componentDidMount()에서 생성된 작업 등을 정리할때 사용된다 .
실행직후 컴포넌트는 랜더링 되지 않으므로 setState() 호출을 하면 안된다.

React Hook에서 라이프사이클 구현에 사용되는 함수 useEffect를 사용한다.

useEffect(() => {
	//코드 
})

useEffect(() => {
	//코드
}, [])

useEffect(() => {
	// 코드 
}, [props명, state명, ...])

useEffect(() => {
	// 코드 적는 곳
    
    return () => {
    	//  unmount나 unsubscribe 코드
    }
}, [props명, state명, ...])