useEffect

Minji Lee·2023년 5월 2일

React hook useEffect

frontend

목록 보기

4/5

useEffect

컴포넌트가 마운트 됐을 때(처음 나타났을 때), 업데이트 될 때(특정 props가 바뀔 때), 언마운트 됐을 때(사라질 때) 특정 작업을 처리하는 Hook

형태 1) 인자로 하나의 콜백함수만 받음

useEffect(()=>{
	// 작업
});

컴포넌트가 렌더링 될 때마다 실행 → 해당 컴포넌트가 화면에 렌더링된 직후에 불림

형태 2) 첫 번째 인자로 콜백함수, 두 번째 인자로 배열(dependency array) 받음

useEffect(()=>{
	console.log('컴포넌트가 화면에 나타남');
},[value]);
// 첫 번째 파라미터: 함수
// 두 번째 파라미터: 의존값이 들어 있는 배열(deps)을 넣음
// deps안에 특정 값이 있으면, 처음 렌더링 될 때와 해당 의존값이 변경될 경우 호출됨, 
//   언마운트시에도 호출되고 값이 바뀌기 직전에도 호출됨
// deps 배열 안넣으면, 컴포넌트가 처음 나타날 때에만 함수 호출

컴포넌트가 화면에 맨 처음 렌더링 될 때 실행
배열 안 요소인 value값이 바뀔 때 실행
배열 안이 비어 있는 경우, 컴포넌트가 맨 처음 렌더링 될 때 실행

clean Up(setTimeout 설정, 이벤트 해제 등)

useEffect(()=>{
	// 작업...
	return () => {
		// 작업 해지
	}
},[]);

return 안에 해제 내용 작성
컴포넌트가 언마운트 될 때, 다음 렌더링 시

useEffect 예제

import React, { useState, useEffect } from "react";

function HookuseEffect() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState("");

  const handleCount = () => {
    setCount(count + 1);
  };

  const handleInputName = (e) => {
    setName(e.target.value);
  };

  // 렌더링될 때마다 매번 실행함 → 렌더링 이후
  useEffect(() => {
    console.log("렌더링!");
  });

  // 마운팅 + count가 변화할때마다 실행됨
  useEffect(() => {
    console.log("count 변경");
  }, [count]);

  // 마운팅 + name이 변경될때마다 실행됨
  useEffect(() => {
    console.log("name 변경");
  }, [name]);

  // 처음에 마운팅 될 때 한번만 실행됨
  useEffect(() => {
    console.log("마운팅");
  }, []);

  return (
    <div>
      <button onClick={handleCount}>Update</button>
      <span>count: {count}</span>
      <br />
      <input type="text" value={name} onChange={handleInputName} />
      <span>name: {name}</span>
    </div>
  );
}

export default HookuseEffect;

처음 렌더링 될 때(마운트 시)

Update 버튼 클릭했을 때

input에 값 입력했을 때

useEffect 예제(clean Up)

useEffect안에서 사용한 코드를 정리할 때 사용 → 타이머 동작, 이벤트 해제

import React, { useEffect } from "react";

function Timer(props) {
  // 타이머 동작이 끝났다면 정리해주기
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 작동 중");
    }, 1000);
    // return 안에 정리작업을 할 코드 작성
    return () => {
      clearInterval(timer);
      console.log("타이머 종료");
    };
  }, []);

  return (
    <div>
      <span>타이머를 시작합니다. 콘솔 확인</span>
    </div>
  );
}

export default Timer;

import React, { useEffect } from "react";

function Timer(props) {
  // 타이머 동작이 끝났다면 정리해주기
  useEffect(() => {
    const timer = setInterval(() => {
      console.log("타이머 작동 중");
    }, 1000);
    // return 안에 정리작업을 할 코드 작성
    return () => {
      clearInterval(timer);
      console.log("타이머 종료");
    };
  }, []);

  return (
    <div>
      <span>타이머를 시작합니다. 콘솔 확인</span>
    </div>
  );
}

export default Timer;