[React] useEffect 정리

 

 

🔑 [keyword] 설정 함수 1-1. 정리 함수 의존성 배열

 

📺 참고 강의

React Hooks에 취한다 - useEffect 깔끔하게 마스터하기 | 리액트 훅스 시리즈

• 컴포넌트가 Mount, Update, Unmount될 때, 특정작업을 처리시켜줄 코드가 필요하다면 useEffect를 활용하면 됩니다.
• 기본적으로 useEffect 훅은 인자로 콜백함수를 받습니다.
  • 콜백함수란 다른 함수의 인자로 전달된 함수
• 콜백함수 내부에 우리가 처리할 작업을 입력해줍니다.

useEffect(()=>{})

 

1. 하나의 콜백함수만 받는 경우
2. 첫 번째 인자로 콜백함수, 두 번째 인자로 배열(dependencies)

배열이 빈 배열일 때

• 화면에 첫 렌더링 될 때만 실행됩니다.

clean up- 정리

• 첫 번째 인자 return 값에 함수를 넣어줍니다.

clean up 참고 코드

// App.js
import { useState,useEffect } from "react";
import Timer from "./component/Timer";

function App() {
  const[showTimer,setShowTimer]=useState(false);

  return (
    <div>
      {showTimer && <Timer/>}
      <button onClick={()=>setShowTimer(!showTimer)}>Toggle Timer</button>
    </div>
  );
}

export default App;

// Timer.js
import React, {useEffect} from "react";

const Timer=()=>{

    useEffect(()=>{
        const timer=setInterval(()=>{
            console.log("타이며 돌아가는 중")
        },1000)

        return ()=>{
            // 정리작업 코드
            clearInterval(timer)
            console.log('타이머가 종료됨')
        }
    },[])

    return(
        <div>
            <span>타이머를 시작합니다. 콘솔을 보세요!</span>
        </div>
    )
}

export default Timer;

 

 

🗯️ 공식 문서

useEffect(setup, dependencies?)

• useEffect는 외부 시스템과 컴포넌트를 동기화하는 React Hook입니다.
  • 일부 컴포넌트에서는 외부 시스템과 동기화해야 할 수 있습니다.
    • 외부시스템: React에 의해 컨트롤되지 않는 모든 코드
      • 몇몇 컴포넌트들은 페이지에 표시되는 동안 네트워크나 브라우저 API, 또는 서드파티 라이브러리와의 연결이 유지되어야 함
      • setInterval()에 의해 관리되는 타이머 또는 clearInterval().
      • window.addEventListener()을 이용한 이벤트 구독 또는 window.removeEventListener().
      • animation.start()와 같은 서드 파티 애니메이션 라이브러리 API 또는 animation.reset().
    • 예를 들어 React의 state을 기준으로 React와 상관없는 구성 요소를 제어하거나, 서버 연결을 설정하거나, 구성 요소가 화면에 나타날 때 분석 목적의 로그를 전송할 수도 있습니다. Effect를 사용하면 렌더링 후 특정 코드를 실행하여 React 외부의 시스템과 컴포넌트를 동기화할 수 있습니다.

매개변수

• setup(설정)
  • Effect의 로직이 포함된 함수입니다.
  • 설정 함수는 선택적으로 clean up(정리) 함수를 반환할 수 있습니다.
  • React는 컴포넌트가 DOM에 추가된 이후에 설정 함수를 실행합니다.
  • 의존성의 변화에 따라 컴포넌트가 리렌더링이 되었을 경우,
    • (설정 함수에 정리 함수를 추가했었다면)
    • React는 이전 렌더링에 사용된 값으로 정리 함수를 실행한 후
    • 새로운 값으로 설정 함수를 실행합니다.
  • 컴포넌트가 DOM에서 제거된 경우에도 정리 함수를 실행합니다.

🏹 <필요한 경우 클린업 함수 추가> - 일부 Effect는 수행 중이던 작업을 중지, 취소 또는 정리하는 방법을 지정해야 할 수 있습니다. 예를 들어, “연결”은 “연결 해제”가 필요하며, “구독”은 “구독 취소”가 필요하고, “불러오기(fetch)“는 “취소” 또는 “무시”가 필요합니다. 이런 경우에 Effect에서 *클린업 함수(cleanup function)*를 반환하여 어떻게 수행하는지 배우게 될 것입니다.

• dependencies 선택사항
  • 설정 함수의 코드 내부에서 참조되는 모든 반응형 값들이 포함된 배열로 구성됩니다. 반응형 값에는 props와 state, 모든 변수 및 컴포넌트 body에 직접적으로 선언된 함수들이 포함됩니다. 린터가 리액트 환경에 맞게 설정되어 있을 경우, 린터는 모든 반응형 값들이 의존성에 제대로 명시되어 있는지 검증할 것입니다. 의존성 배열은 항상 일정한 수의 항목을 가지고 있어야 하며 [dep1, dep2, dep3]과 같이 작성되어야 합니다. React는 각각의 의존성들을 Object.is 비교법을 통해 이전 값과 비교합니다.
  • 의존성을 생략할 경우, Effect는 컴포넌트가 리렌더링될 때마다 실행됩니다. 인수에 의존성 배열을 추가했을 때, 빈 배열을 추가했을 때, 의존성을 추가하지 않았을 때의 차이를 확인해 보세요.

React는 설정 함수와 정리 함수가 필요할 때마다 호출할 수 있으며, 이는 여러 번 호출될 수 있습니다.

1. 컴포넌트가 화면에 추가되었을 때 설정 코드가 동작합니다 (마운트 시).
2. 의존성이 변경된 컴포넌트가 리렌더링 될 때마다 아래 동작을 수행합니다.
   • 먼저 정리 코드가 오래된 props와 state와 함께 실행됩니다.
   • 이후, 설정 코드가 새로운 props와 state와 함께 실행됩니다.
3. 컴포넌트가 화면에서 제거된 이후에 정리 코드가 마지막으로 실행됩니다 (마운트 해제 시).

 

🐊 참고 코드

const [counter,setValue]=useState(0);
  const [keyword, setKeyword]=useState("");
  const onClick=()=>setValue((prev)=>prev+1);
  const onChange=(event)=> setKeyword(event.target.value);
  useEffect(()=>{
    console.log("I run only once.");
  },[keyword]);
  useEffect(()=>{
    console.log("I run when 'keyword' changes.");
  },[]);
  useEffect(()=>{
    console.log("I run when 'counter' changes.");
  },[counter]);
  useEffect(()=>{
    console.log("I run when 'keyword&counter' changes.");
  },[keyword,counter]);

 useEffect(() => {
    getMovie();
  }, [id]);

useEffect(()=>{
    fetch("<https://api.coinpaprika.com/v1/tickers>")
    .then((response)=> response.json())
    .then((json)=>{
      setCoins(json);
      setLoading(false);
    })
  },[]);