[React] useEffect()

useEffect

useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook

• componentDidMount: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행.
• componentDidUpdate: 리렌더링을 완료한 후 실행. 즉 render()가 업데이트될 때마다 실행.
• compoenntWillUnMount: 컴포넌트를 DOM에서 제거할 때 실행.

React Hooks

• 리액트 hook은 React 16.8버전에 새로 추가된 기능으로, 함수형 컴포넌트에서 react state와 생명주기 기능(lifecycle features)을 "연동(hook into)할 수 있게 해준다. useState를 예시로 들면 class를 사용하지 않고도 상태를 가질 수 있게 된 것이다.
  • Hook은 Class 안에서는 동작하지 않는다.
• 이전에 리액트가 겪던 문제들을 해결해주며 클래스형 컴포넌트를 사용하지 않고도 함수형 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능해졌다
• 리액트는 useState, useEffect 같은 내장 Hook을 몇 가지 제공한다
• 또한 props, state, context, refs 그리고 lifecycle과 같은 리액트 개념에 좀 더 직관적인 API를 제공한다. 또한 이 개념들을 엮기 위해 새로운 방법을 제공한다
  • 컴포넌트 간에 상태 관련 로직을 재사용하기 위해 hook을 직접 만드는 것도 가능하다

---

참고 : https://velog.io/@niboo/React-Hooks-란

📌기본 형태

useEffect(function, deps)

• function : 실행하고자 하는 함수
• deps : 배열 형태. function을 실행시킬 조건.
  deps에 특정값을 넣게 되면 컴포넌트가 mount 될 때, 지정한 값이 업데이트될 때 useEffect를 실행.

📌useEffect 함수 불러오기

import React, { useEffect } from "react";

📌사용

1. Component가 Mount 되었을 때(나타날 때)

useEffect(() => {
  console.log("렌더링 될때마다 실행");
});

deps부분을 생략한다면 해당 컴포넌트가 렌더링 될 때마다 useEffect가 실행.
만약 맨 처음 렌더링 될 때 한 번만 실행하고 싶다면 deps위치에 빈 배열을 넣어줌.

useEffect(() => {
  console.log("맨 처음 렌더링될 때 한 번만 실행");
},[]);

2. Component가 Update 되었을 때(props, state 변경)

useEffect(() => {
  console.log(name);
  console.log("name이라는 값이 업데이트 될 때만 실행");
},[name]);

특정값이 업데이트될 때만 실행하고 싶을 때는 deps위치의 배열 안에 실행 조건을 넣어줌.
업데이트뿐만 아니라 마운터 될 때도 실행되므로 업데이트될 때만 실행시키고 싶다면 아래와 같은 방법을 사용.

const mounted = useRef(false);

useEffect(() => {
  if (!mounted.current) {
    mounted.current = true;
  } else {
    console.log(name);
    console.log("업데이트 될 때마다 실행");
  }
}, [name]);

3. Component가 Unmount 되었을 때(사라질 때) & Update 되기 직전에

const [banner, setBanner] = useState(true);

useEffect(() => {
  console.log("컴포넌트 나타남");
  console.log(name);
  let a = setTimeout(() => {
    setBanner(false)
  }, 1000);
  return () => {
    clearTimeout(a);
    console.log("cleanUp 함수");
  };
});

useEffect는 함수를 반환할 수 있는데 이 함수를 cleanup이라고 함.

Unmount 될 때만 cleanup 함수를 실행시키고 싶다면 deps에 빈 배열을,
특정 값이 업데이트되기 직전에 cleanup 함수를 실행시키고 싶다면 deps에 해당 값을 넣어주면 됨.