useEffect

참고 : https://ko.reactjs.org/docs/hooks-effect.html (공식문서)

useEffect

1. 정의

: 컴포넌트가 렌더링 될 때마다, 특정 작업을 수행하도록 설정할 수 있는 Hook.

2. 기능

: React 컴포넌트에는 일반적으로 두 종류의 side effects가 있다.

• 기능1 - 정리(clean-up)을 이용하는 않는 Effects
  : 정리(clean-up)가 필요없는 경우에는 콜백함수에서 어떤 것도 반환하지 않음.

• 기능2 - 정리(clean-up)을 이용하는 Effects
  : effect에 정리(clean-up)가 필요한 경우에는 콜백함수에서 함수를 반환함.

3. 형태

useEffect(callback, [])
- 첫번째 인자는 콜백함수 : 실행하려는 코드
- 두번째 인자는 배열 : 지켜보려는 값을 배열에 넣음.

🔆 useEffect의 실행시기

• useEffect는 컴포넌트가 실행되고~jsx까지 다 렌더된 후 실행된다.
• 때문에 컴포넌트에 시간이 오래걸리는 연산들이 있다면 html이 렌더될 때 느리게 뜰 수 있다.
• 따라서 useEffect안에 복잡한 연산을 넣어준다면 html이 우선 다 렌더된 후, 나중에 복잡한 연산을 실행할 수 있어서 화면 렌더에 지연이 없다.

🔆 useEffect의 쓰는 경우

useEffect를 쓰면 코드의 실행 시점을 조절할 수 있기 때문에
조금이라도 html 렌더링이 빠른 사이트를 원하면
쓸데없는 것들은 useEffect 안에 넣어 처리할 수 있음.

컴포넌트의 핵심 기능은 html 렌더링이라
그거 외의 쓸데없는 기능들은 useEffect 안에 적으면 됨.

• 시간이 걸리는 어려운 연산
• 서버에서 데이터 가져오는 작업
• 타이머 장착하는 작업(ex. 화면이 다 렌더된 후 2초뒤 alert이 뜬다)

🔶 정리(clean-up)이용하지 않는 Effects

: 정리(clean-up)가 필요없는 경우에는 콜백함수에서 어떤 것도 반환하지 않습니다.

1. 사용

: 원래 state가 변경되면, 컴포넌트는 리렌더링 됨.

: 그러나 state 값이 바뀔때마다 계속 모든 컴포넌트 전체가 리렌더 되는게 아니고,
어떤 "특정 값"이 바뀌었을 때만 리렌더 되도록 선택권을 줄 수 있게됨.

2. 배열에 값을 주지 않으면 - 처음 컴포넌트가 렌더될 때, 한번만 실행됨

• API호출을 딱 한번만 실행되고, 그 뒤로는 다시 실행하기 싫은 경우 활용함.

  useEffect(() => {
    console.log("only once");
    fetch(...)
  }, []);

3. 배열에 값을 주면 - 해당 값이 업데이트될 때마다 리렌더가 실행됨.

function App() {
  const [value, setValue] = useState(0);
  const setValueFn = () => setValue((prev) => prev + 1);

  const [keyword, setKeyword] = useState("");
  const setKeyFn = (e) => setKeyword(e.target.value);

  // 1. 항상실행 : 어떤 값이 바뀌든 항상 실행됨.
  console.log("always");

  /* 2. 빈배열 - 처음 컴포넌트가 렌더될 떄, 한번만 실행됨
       빈배열을 주면, react가 지켜볼게 아무것도 없어서 처음 렌더시 한번만 실행됨.
       (api호출같이 계속 실행하면 안되는 코드 활용) */
  useEffect( () => {console.log("only once")}, []);

  // 3. 시작할때랑, value값이 바뀔때만 실행됨.
  useEffect(() => console.log("only value"), [value]);

  // 4. 시작할때랑, keyword가 바뀌는데 + 글자가 5이상 일때만 실행됨
  useEffect(() => {
    if ((keyword === "") || (keyword.length >= 5)) {
      console.log("only keyword");
    }
  }, [keyword]);

  // 5. 시작할때랑, value 또는 keyword 둘 중 하나가 바뀔때 실행됨.
  useEffect(() => console.log("value or keyword"), [value, keyword]);

  return (
    <div>
		//
    </div>
  );
}

🔶 정리(clean-up)를 이용하는 Effects

: effect에 정리(clean-up)가 필요한 경우에는 콜백함수에서 함수를 반환함.

1. 사용

useEffect의 첫번째 인자인 콜백함수에서 함수를 반환하면 cleanup함수로 이용됨.
반환된 cleanup함수는 useEffect를 사용한 해당 컴포넌트가 사라질 때 즉,언마운트 될 때 실행됨.

• 사용1: 기존 타이머 실행을 제거한 후 새로 setTimeOut이 실행하게 할 때.
• 사용2: 기존 데이터 요청은 제거 한 후 새로 api 호출하게 할 때.

2. 예제코드

Other컴포넌트가 렌더될 때 return 이전의 코드만 실행되고,
Other컴포넌트가 사라지고 나면 return 된 cleanup 함수가 실행되는 것임.

import { useState, useEffect } from "react";

function App() {
  const [show, setShow] = useState(true);

  return (
    <>
      <button type="button" onClick={() => setShow(!show)}>
        토글버튼
      </button>
      {show ? <Other /> : null}
    </>
  );
}

function Other({ data }) {
  useEffect(() => {
    console.log("추가된당");
    return () => {
      console.log("제거된당");
    };
  }, []);
  return <h1>Other</h1>;
}

export default App;