[React] 리액트 라이프사이클(Lifecycle)과 useEffect

React는 컴포넌트 기반의 라이브러리로, 모든 컴포넌트는 생명주기(Lifecycle)를 가집니다. 생명주기는 컴포넌트가 생성, 업데이트, 제거되는 과정을 의미하며 이를 활용해 컴포넌트의 특정 시점에 원하는 동작을 정의할 수 있습니다.

 

목차

1. 리액트의 라이프사이클 단계

2. 함수형 컴포넌트와 useEffect

3. useEffect 사용 시 주의할 점

추천글

위의 목차를 클릭하면 해당 글로 자동 이동 합니다.

 

1. 리액트의 라이프사이클 단계

위 사진은 Class 방식의 라이프 사이클입니다.

함수형 방식에서는 컴포넌트의 라이프사이클은 크게 세 가지로 나눌 수 있습니다.

1. 마운트 (Mount)

• 정의: 컴포넌트가 생성되고 DOM에 추가되는 단계
• 주요 메서드: componentDidMount (클래스 컴포넌트 기준)
• 주요 작업: API 호출, 이벤트 리스너 등록 등 초기화 작업.

2. 업데이트 (Update)

• 정의: 컴포넌트의 상태(state)나 속성(props)이 변경되어 다시 렌더링 되는 단계
• 주요 메서드: componentDidUpdate (클래스 컴포넌트 기준)
  • componentDidUpdate 메서드는 첫 번째 렌더링에서는 호출되지 않습니다.
• 주요 작업: 상태 변화에 따른 DOM 조작 또는 부수 효과 실행

3. 언마운트 (UnMount)

• 정의: 컴포넌트가 DOM에서 제거되는 단계
• 주요 메서드: componentWillUnmount (클래스 컴포넌트 기준)
• 주요 작업: 이벤트 리스너 제거, 타이머 정리 등 클린업 작업

2. 함수형 컴포넌트와 useEffect

React 16.8부터 도입된 Hooks는 함수형 컴포넌트에서도 상태 관리와 라이프사이클 관리가 가능하게 합니다.

useEffect는 클래스 컴포넌트의 라이프사이클 메서드(componentDidMount, componentDidUpdate, componentWillUnmount)를 통합한 역할을 합니다.

 

리액트에서 사이드 이팩트(side effect) 는 외부에서 데이터나 상태를 변경하는 것인데, 이를 수행하는 것이 바로 useEffect 훅입니다. 즉, 리액트에서 useEffect 는 사이트 이팩트(side effect)를 실행하고 싶을 때 사용하는 함수라고 할 수 있습니다.

 

useEffect 기본 구조

useEffect(() => {
  // 사이드 이펙트
  return () => {
    // 클린업 코드
  };
}, [dependency]);

• 첫 번째 인자: 사이드 이팩트(side effect)를 실행할 함수(callback) [필수]
• 두 번째 인자: 의존성 배열(dependency array) [필수]
  • 배열 안의 값이 변경될 때만 효과(callback)가 실행됩니다.
• 클린업 코드: useEffect에서 반환(return)하는 함수입니다. [옵션]
  •  컴포넌트가 언마운트 될 때 실행됩니다.
  • 장점: 메모리 누수 방지, 성능 향상, 안정성 향상

의존성 배열에 따른 동작

 

빈 배열 ([])

• 컴포넌트가 처음 마운트될 때만 실행됩니다.
• 주로 API 호출, 초기화 작업에 사용합니다.

useEffect(() => {
  console.log("컴포넌트 마운트");
}, []);

 

 

 

dependencies에 값이 있는 배열 ([value])

• dependencies 배열에 포함된 값이 변경될 때 실행됩니다.
• 특정 상태나 속성 변화에 따른 작업을 처리합니다.

useEffect(() => {
  console.log(`${value} 상태가 변경되어 실행`);
}, [value]);

 

 

 

배열 생략

• 컴포넌트가 렌더링 될 때마다 실행됩니다.
• 일반적으로 의도하지 않은 성능 문제를 유발할 수 있어 주의가 필요합니다.

useEffect(() => {
  console.log("렌더링");
});

 

 

3. useEffect 사용 시 주의할 점

• 무한 루프 방지: 의존성 배열을 정확히 설정하지 않으면 무한 렌더링이 발생할 수 있습니다. 특히 HTTP Method와 같은 요청이 반복되면 서버에 과부하를 일으킬 수 있어 조심해야 합니다.
• 클린업 누락 방지: 컴포넌트가 언마운트 되거나 의존성이 변경될 때 클린업 함수를 실행하지 않으면 메모리 누수가 발생할 수 있습니다.
• 비동기 작업 처리: 비동기 작업은 async/await를 직접 useEffect 콜백에 사용할 수 없으므로 내부 함수로 분리해야 합니다.
  

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch("https://api.example.com/");
      const data = await response.json();
      console.log(data);
    };
  
    fetchData();
  }, []);

 

추천글

[React] React Hook Form 라이브러리로 Form 간편하게 관리하기

 

[React] IntersectionObserver를 통한 스크롤 이벤트