useEffect란?

컴퍼넌트가 렌더링 될 때 실행하고 싶은 처리를 제어하는 ​​기능.

덧붙여서 컴퍼넌트가 재렌더링되는 조건은 이하이다
1. 상태가 업데이트될 때
2. props가 갱신될 때
3. 상위 구성 요소가 다시 렌더링될 때

기본 구문

useEffect(() => {
  // ① 実行させたい処理
  return () => {
    // ② ①の処理と対の関係になるクリーンアップ関数（省略可能）
  };
}, [依存配列]); // ③ 第１引数の実行タイミングを制御する値

종속 배열을 빈 배열로 만든 경우

첫회 렌더링시 한 번만 ①이 실행된다.
다시 렌더링되어도 실행되지 않습니다.

마운트 시 : ①이 실행

마운트 해제 : ②가 실행

useEffect(() => {
  // ① 実行させたい処理
  console.log("①");
  return () => {
    // ② ①の処理と対の関係になるクリーンアップ関数
    console.log("②");
  };
}, []); // ③ 依存配列を空配列にする

종속 배열에 값을 지정하는 경우

종속 배열에 변수 count를 지정하고 count에 관심을 갖습니다.
최초 렌더링시 ①이 실행되는 것은 변하지 않지만, 그 후 count가 갱신되면 ②, ①의 순서로 실행된다.

②が実行 → ①が実行

useEffect(() => {
  // ① 実行させたい処理
  console.log(`① count：${count}`);
  return () => {
    // ② ①の処理と対の関係になるクリーンアップ関数
    console.log(`② count：${count}`);
  };
}, [count]); // ③ 依存配列に変数 count を指定

종속 배열을 업데이트하여 움직임을 확인하십시오.

변수 count 를 갱신하는 버튼이 있고, 버튼을 누르면 count 가 1씩 증가해 가는 버튼 위의 숫자도 증가해 간다고 하는 것.

※문자의 크기가 다른 것은 신경쓰지 말아 주세요. 스쿠쇼가 서투른 뿐입니다. 웃음

마운트 시(초회 렌더링 시)

보기
콘솔

2로 카운트 업 (count 업데이트)

보기
콘솔

3에 카운트 업 (count 업데이트)

보기
콘솔






여기서 주목하고 싶은 부분으로는

②が実行 → ①が実行

의 순서로 실행되는 것이지만, ②가 실행될 때의 count 는 카운트 업되기 전(값이 갱신되기 전)의 상태로 실행되고 있다고 하는 것이다.
①이 실행되었을 때의 상태에서 ②가 실행되는 것 같다.

사용소로서는
①에서 리스너나 감시 처리를 세트하고, ②에서 ①로 설정한 처리를 해제한다.
라는 것이 생각된다.
(React의 공식에서는 Subscription 의 설정 등에 접하고 있었다)

마지막으로

매우 쉽고 참고로했습니다!
고마워요!

React 부작용 후크의 사용법

React hooks를 기초로부터 이해한다(useEffect편)

React17에서 useEffect의 파괴적 변화 이해

React (v16.4) 구성 요소 수명주기 방법 요약