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

React 생명주기?

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)이 변경되면 실행 된다 .

• componentDidUpdate()
  render(업데이트)가 일어난 직후에 호출되며 최초 랜더링에서는 호출 되지 않는다

소멸단계

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

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

함수형 컴포넌트

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

• render 될때마다 실행

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

• 마운트 이후 한번만 실행(componentDidMount()와 동일)

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

• 업데이트 될때마다 실행(componentDidUpdate()와 동일)

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

• 컴포넌트 제거될 때 실행(componentWillUnmount()와 동일)

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

출쳐: lee_geon_woo4336/