useEffect

함수형 컴포넌트에서 useEffect 를 이용해서 Lifecycle 를 관리 할 수 있습니다.

사용법

import React, { useEffect } from "react";

• useEffect 를 사용 합니다.
• 2개의 파라미터를 전달하게 되는데 1. callback 함수, 2. 의존성 배열 을 전달 합니다.
• 의존성 배열을 뎁스라고 부르기도 합니다.

  의존성 배열에 들어있는 값 중 하나라도 변화하면, 첫 번째 파라미터인 콜백 함수가 다시 수행

예시

코드

Lifecycle.js

import React, { useEffect, useState } from 'react';

const Lifecycle = () => {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');
  
  // Mount
  useEffect(() => {
    console.log('Mount!');
  }, []);

  // Update
  useEffect(() => {
    console.log('update!');
  });

  return (
    <div style={{ padding: 20 }}>
      <div>
        {count}
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>
      <div>
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default Lifecycle;

1. 컴포넌트가 탄생할 때 - Mount 되는 시점

useEffect(() => {
    console.log('Mount!');
}, []);

• 컴포넌트가 Mount 되는 시점에 console 이 실행이 됩니다.
• 컴포넌트 Mount 시점에서 무언가를 하고 싶으면 useEffect 의 두 번째 인자인 뎁스에 빈 배열을 전달 한 다음에 콜백 함수에 개발자가 하고 싶은 일을 넣으면 됩니다.

2. 컴포넌트가 update 되는 경우

• 업데이트가 되는 시점은 state 가 변경 되거나, 부모에게서 내려받는 props 가 바뀌거나, 또는 부모 컴포넌트가 리렌더링이 되면 자기 자신이 리렌더링 됩니다

  리렌더 된다는 뜻은 컴포넌트가 업데이트 된다는 말과 동일 합니다.

useEffect(()=>{
	console.log("update!");
})

• 사용할 때는 의존성 배열(뎁스) 를 전달하지 않으면 됩니다.
  

만약 count > 5 를 넘어가면 위험한 경우

useEffect(() => {
    console.log(`count is update ${count}`);
    if (count > 5) {
      alert('count 가 5 를 넘었습니다. 따라서 1로 초기화 합니다.');
      setCount(1);
    }
  }, [count]);

3. 컴포넌트가 화면에서 사라질 때 - Unmount

import React, { useEffect, useState } from 'react';

const UnmountTest = () => {
  useEffect(() => {
    console.log('Mount!');

    return () => {
      // Unmount 시점에서 실행
      console.log('Unmount!');
    };
  }, []);

  return <div>Unmount Testing Component</div>; // True인 경우 화면에 return
};

const Lifecycle = () => {
  const [isVisible, setIsVisible] = useState(false);
  const toggle = () => setIsVisible(!isVisible);

  return (
    <div style={{ padding: 20 }}>
      <button onClick={toggle}>ON / OFF</button>
      {isVisible && <UnmountTest />}
    </div>
  );
};

export default Lifecycle;

{isVisible && <UnmountTest/>} 

• isVisible 이 True 인 경우만 UnmountTest 컴포넌트가 화면에 렌더링이 됩니다.
• isVisible 이 Fales 인 경우는 && (and) 연산자여서 모두 True 인 경우만 유효하기 때문에 비교를 할 수 없습니다. 즉 렌더링이 되지 않습니다.

Mount 에 전달되는 콜백 함수가 함수를 리턴 받게 하면 됩니다.

const UnmountTest = () => {
  useEffect(() => {
    // Mount 에 전달되는 콜백 함수
    console.log('Mount!');

    return () => {
      // Unmount 시점에서 실행
      console.log('Unmount!');
    };
  }, []);

참고

• 인프런