LifeCycle Method

생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질때, 오류가 발생할 때 호출되는 메서드들 입니다.

생명주기 메소드는 class형 component 에서만 사용할 수 있으며 함수형에서는 useEffect() 를 사용합니다. 이 둘은 비슷하지만 서로 호환되지 않는 기능과 약간의 차이가 있습니다.

만약 컴포넌트가 렌더링되었을때 실행순서입니다.

Mounting 마운팅

1. construct (생성자)

 constructor(props) {
    super(props);
    console.log("constructor");
  }

2. getDerivedStateFromProps
   props으로 받아온 변수를 state로 사용할 때 사용합니다

static getDerivedStateFromProps(props, state)

이 함수는 자료형을 static 으로 선언해야합니다.

3. render
   클래스 내에 render() 함수에 해당합니다.

4. componentDidMount
   모든 렌더링을 끝난 후 실행되는 함수입니다.

Updating 업데이팅

1. getDerivedStateFromProps
   props으로 받아온 변수를 state로 사용할 때 사용합니다.

static getDerivedStateFromProps(props, state)

이 함수는 자료형을 static 으로 선언해야합니다.

2. shouldComponentUpdate
   컴포넌트의 리렌더링 여부를 확인하는 함수입니다. React.memo 와 비슷하다고 보면 됩니다.

3. render
   클래스 내에 render() 함수에 해당합니다.

4. getSnapshotBeforeUpdate
   컴포넌트가 Rendering 된 후 Dom에게 영향을 미치기 전에 호출되는 함수입니다. DOM이 변경되기 전의 값을 가져올 수 있습니다.
   이 함수가 반환하는 값은 componentDidUpdate() 인자로 전달됩니다.

5. componentDidUpdate
   컴포넌트가 Update 를 마친 후 실행하는 함수입니다.

Unmounting 언마운팅

컴포넌트가 화면에서 사라지기 직전에 실행되는 함수입니다.

1. componentWillUnmount

 componentWillUnmount() { }

DOM의 이벤트를 제거하거나, setTimeout 이 있으면 clearTimeout을 하는 데 사용합니다.

useEffect()

useEffect() 는 클래스형 컴포넌트가 아닌 함수형 컴포넌트에서 사용할 때 쓰입니다. 개념은 LifeCycle 이랑 비슷하지만 구동 방식은 다릅니다.

useEffect() 는 컴포넌트가 마운트됐을 때 (첫 시작) , 언 마운트 됐을 때 ( 사라질때 ), 업데이트 됐을 때 실행되는 함수입니다.

useEffect 형태

import { useEffect } from "react"

useEffect(() => {
 code...
})

위의 코드는 렌더링될때마다 계속 실행됩니다.

.
주로 첫 마운팅했을 때 하는 작업은

• props 으로 받은 값 처리
• 라이브러리 사용이나 REST API 활용
• setInterval 이나 setTimeout

언마운팅했을 때 하는 작업은

• setTimeout 제거나 setInterval 제거
• 라이브러리 제거

useEffect() 는 State 변경으로 컴포넌트가 리렌더링됐을때마다 실행됩니다. 만약 최초 실행시 한번만 실행 시키고 싶으면 useEffect() 뒤에 빈 배열을 넣어주세요.

useEffect(() => {
 code...
},[ ])  <- 빈배열로 인해 마운팅됐을때 한번만 실행됩니다.

만약 특정 변수가 바뀔때마다 실행되게 하려면 배열에 해당 변수 값을 넣어주세요.

useEffect(() => {
 code...
},[data1 , data2])  <- 해당 변수가 변경될때 마다 리렌더링 됩니다.

그리고, 언마운팅할때 기능을 구형하고 싶으면 useEffect() 안에 return 을 선언해 주시면 됩니다.

useEffect(() => {
 code...
 return () => { return.. } <- 컴포넌트가 언마운트 될때 실행됩니다.
},[ ])