React - lifecycle(2) - useEffect

useEffect

• Class형 react에서는 react의 생애주기를 관리하기 위해 componentDidMount(첫 렌더링에 실행시킬 함수), componentDidUpdate(지정한 변수에 변화가 생겼을 때 실행시킬 함수), componentWillUnmount(컴포넌트가 종료되기 전에 실행시킬 함수)을 각각 사용한다.

• React hooks에선 useEffect라는 API로 한번에 묶어서 실행이 가능하다.(조건에 따라 실행시킬 함수가 많다면 각각의 useEffect를 사용하는 것이 편하다.)

useEffect 기본적인 사용 방법

componentDidMount

기본 문법
  useEffect(() => {
   console.log('hi') // componentDidMount될 때 실행시키고자 하는 함수
  }, []); // 빈 배열일 경우 componentDidMount만 실행

• useEffect의 parameter는 function과 array가 존재한다.
• function parameter에는 생애주기를 관리하고 싶은 함수(데이터)를 중괄호 내부에 작성.
• array parameter에는 useEffect가 실행될 조건을 넣어주면 된다.
• 위 식처럼 빈 배열을 출력한다면 componentDidMount만 실행한다는 의미이다.

componentDidUpdate

  useEffect(() => {
   console.log('hi') // componentDidUpdate될 때 실행시키고자 하는 함수
  }, [email, nickname]); //componentDidUpdate될 때 실행되는 조건(값이 바뀌거나 값을 만족하거나)

• 위 식처럼 배열에 특정 조건이나 state를 작성한다면 state의 값에 변화가 생길 때마다 첫 번째 parameter 함수가 실행된다.
• 위 식은 componentDidUpdate와 componentDidMount가 동시에 실행된다.
• 배열에는 ref를 넣어줘도 된다. 주의할 점은 ref 값의 변화는 ref에 직접 값을 할당할 때만 인식된다는 점이다.

componentWillUnmount

  useEffect(() => {
   console.log('hi')
    return ()=>{ // 이 부분부터 componentWillUnmount 될 때 실행시키고자 하는 함수 작성
    console.log('bye'}
  }, [email, nickname]);

• function parameter의 return값이 componentWillUnmount가 실행될 때 실행시키고자 하는 함수이다.

useEffect 응용

componentDidUpdate만 실행시키고 싶다면?

• 위에서 본 것처럼 componentDidUpdate와 componentDidMount는 첫 렌더링 시에 같이 실행이 돼서 생각한대로 작동이 안하는 경우가 발생한다.
• 그런 경우, 아래 식처럼 ref값을 이용하여 조건부로 작동시킨다.

import {useEffect} from 'react';
const mounted = useRef(false);
useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else 'didupdate 시 실행시키고 싶은 함수';
}, ['바뀌는 값']);