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!');
    };
  }, []);

 

정리

✔ useEffect

• useEffect() 훅으로만 클래스 컴포넌트의 생명주기 함수들과 동일한 기능을 수행 할 수 있음
• 첫 컴포넌트 렌더링 시 한 번은 수행 ( [ ] 여부와 관계없이 )

useEffect(() => {
	console.log(number)
	console.log(action)
},[number, action])

만약 number 의 값이 변하면 위의 useEffect 는 다시 작동 합니다. ( action 값이 같아도! )

• 즉, number가 바뀌면 console.log(action) 은 같이 나옵니다.
• 이유는 의존성 배열에 들어있는 값이 변하기 때문입니다.

 

✔ 참고

• 인프런