TIL | 뭐하는 훅이세요..? React Hook - useEffect

레이나·2025년 1월 31일

React useEffect

Today I Learned

목록 보기

37/47

[25.01.31 금요일]

훅이라는것이 줄줄이 나오기 시작했다..

📌useEffect

컴포넌트의 부수 효과(side effect)를 처리하는 데 사용.

컴포넌트의 상태 변경이나 외부 시스템과의 상호작용 등을 쉽게 처리할 수 있다.

라고 합니다..일단 useEffect의 기본 사용법과 정리 작업(cleanup)에 대해 정리.

useEffect 기본 사용법

useEffect(() => {}, []): 컴포넌트가 처음 마운트될 때만 실행.
useEffect(() => {}, [value]): 의존성 배열의 값(value)이 변경될 때마다 실행.
useEffect(() => {}): 컴포넌트가 렌더링 될 때마다 실행.

1. Mount 화면에 첫 렌더링 될 때만 실행

useEffect의 2번째 인자인 defendency array를 빈 배열[] 로 정의 하면, 화면에 첫 마운트될 때만 해당 콜백함수가 실행된다.

// callcank function, defendency array[] 
useEffect(() => {}, []);

// Mount때만 렌더링
  useEffect(() => {
    console.log("마운팅 🫐");
  }, []);

2. Mount, Update(배열안의 값이 바뀔때 실행)

useEffect의 2번째 인자인 defendency array에 [value]를 넣으면, 화면에 첫 마운트될 때와 해당 값이 변화할 때 콜백함수가 실행된다.

// callcank function, defendency array[value]
usEffect(() => {}, [value]);

// Mount & [count] 변화시 렌더링
  useEffect(() => {
    console.log("count 변화 🍓");
  }, [count]);

// 첫 렌더링 & [text] 변화시 렌더링
  useEffect(() => {
    console.log("text 변화 🥦");
  }, [text]);

3. 렌더링 될 때마다 실행

useEffect의 2번째 인자인 defendency array를 정의 하지 않은 경우, 화면에 첫 마운트될 때 & 모든 리렌더링시 콜백함수가 실행된다.

// callcank function
useEffect(() => {});

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

🧹 Clean UP - 정리 작업

특정 작업이 끝나고 난 후 정리할 때 사용.
Unmount 또는 다음 렌더링시 호출될 useEffect 실행 전.
이전에 설정한 리소스를 해제하거나, 이벤트 리스너를 제거하는 등의 작업을 할 수 있다.

useEffect(() => {
  // 특정 작업 코드 (예: 이벤트 리스너 추가)
  
  return () => {
    // 정리 작업 코드 (예: 이벤트 리스너 제거)
  };
}, []);

✅ 예시

정리 전 : 토글 타이머 버튼을 눌러 타이머를 중지 시켜도 콘솔창 타이머는 계속 실행되는 중.

정리 후 : 토글 타이머 버튼을 눌러 타이머를 중지 시키면 타이머가 종료됨.

useEffect(() => {
  const timer = setTimeout(() => {
    console.log('타이머가 종료되었습니다!');
  }, 1000);

  // 정리 작업: 컴포넌트가 언마운트되거나 의존성 값이 변경될 때 타이머 정리
  return () => {
    clearTimeout(timer);
  };
}, []);