[React] 10. useEffect를 통한 생명 주기 사용하기

잘못 된 내용에 대한 지적은 언제든 환영입니다.

useEffect

• 함수형 컴포넌트의 렌더링에 따라 원하는 작업을 수행하도록 돕는 Hook이다.
• 클래스형 컴포넌트의 생명주기 메소드 기능을 함수형 컴포넌트에서도 사용할 수 있도록 한다.
• 마운트 직후/언마운트 직전/언마운트 및 deps 내부 값 변경 직전/마운트 및 deps 내부 값 변경 직후 중 원하는 시점에서 특정 작업을 처리할 수 있다.
  (마운트=렌더링, 언마운트=사라짐)

useEffect 함수의 구조

useEffect(function[, deps])

• function : 수행시키고자 하는 작업
• deps : 상태 변경을 감지하고자 하는 값이 들어가는 의존성 배열

파라미터 조합에 따른 작업 수행 시점

• useEffect(함수) ➡ 마운트

useEffect(() => {
  console.log("마운트 발생");
});

• useEffect(함수, 빈 deps 배열) ➡ 최초 마운트

useEffect(() => {
  console.log("최초 마운트 발생");
}, []);

• useEffect(함수, state 값이 들어간 deps 배열) ➡ 최초 마운트 및 state 값 업데이트

const [item, setItem] = useState(0);

useEffect(() => {
  console.log("최초 마운트 OR 상태 업데이트");
}, [item]);

setItem(item + 1);

콘솔 출력 결과

최초 마운트 OR 상태 업데이트
최초 마운트 OR 상태 업데이트

• [번외] 최초 마운트는 스킵하고 state 값 업데이트 시에만 작업 수행하기 w/useRef 변수

const [item, setItem] = useState(1);

// 최초 마운트 시 true로 바꾸어 줄 변수
const isMounted = useRef(false);

useEffect(() => {
  if (!isMounted.current) {
    // 최초 마운트 시
    isMounted.current = true;
  } else {
    // deps에 들어간 state 값 변경 시
    console.log("상태 업데이트");
  }
}, [item]);

// state 값 변경
setItem(item + 1);

콘솔 출력 결과

상태 업데이트

cleanup 함수

• 언마운트 or deps 내부의 state값 업데이트 시 반환되는 함수이다.

   const [item, setItem] = useState(1);

   useEffect(() => {
     console.log("마운트");

     // cleanup 함수
     return () => {
       console.log("언마운트 OR 상태 업데이트 직전");
     
   }, [item]);

   // 상태 변경으로 cleanup 함수가 리턴됨
   setItem(item + 1);

   //콘솔 출력 결과
   마운트
   언마운트 OR 상태 업데이트 직전
   마운트

References
"16. useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기" .velopert
"React Hooks : useEffect() 함수" .xiubindev