[TIL034] 오늘 배운 것 useEffect, clean-up

20240614 34일차

---

useEffect

간단하게 사이드 이펙트를 처리하기 위해 사용되는 훅이다.

사이드 이펙트란?

외부 시스템에서 상호작용 하는 것
API 호출, 타이머 설정, DOM 조작 등이 있다.

useEffect는 이번 프로젝트에서 API 데이터를 호출할 때 사용되었다.
useEffect 없이 API를 호출하면 무한 렌더링 (무한 루프)에 빠질 수 있다.

기본 구조

useEffect (() => {
//실행할 함수
}, []);

useEffect는 두개의 인자를 받는다.

• 첫 번째 인자: 실행할 함수
• 두 번째 인자: 의존성 배열 (Defendency Array)
  빈 배열 []을 전달하면, 이 함수는 컴포넌트가 처음 렌더링될 때 한 번만 실행된다.

예시코드

  useEffect(() => {
    // API 호출
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

빈배열을 두번째 인자로 둠으로써 API 호출이 한 번만 되도록 한다.

clean-up

clean-up 함수는 useEffect에서 반환하는 함수다.
cleanup 함수는 메모리 누수를 방지하고, 불필요한 리소스를 정리하는 데 유용하다.
컴포넌트가 언마운트* 되기 전 함수가 반환된다.

언마운트가 도대체 뭐시죠?

생명주기(Lifecycle) 의 세 가지 중 하나다.
생명주기란 간단하게 설명하면, 컴포넌트가 생성,사용, 소멸되는 과정을 일컫는다. 단어만 거창하다.
생명 주기를 이해하며 코드를 작성하면 효율적인 코드 관리, 더 나은 사용자 경험 제공이 가능하다.

마운트 (Mount)

컴포넌트가 DOM에 처음 삽입되는 시점

업데이트 (Update)

컴포넌트가 상태(state)나 프롭스(props)의 변경으로 다시 렌더링되는 단계

언마운트 (Unmount)

컴포넌트가 화면에서 제거되는 단계

clean-up 기본구조

useEffect(() => {
  // 실행할 코드
  return () => {
    // 이 return이 cleanup 코드이다.
  };
}, []);

return문 안에 작성하면 끗!