🌟[매일메일] useEffect란? useLayoutEffect와 차이 (FE.250113/250128)

 

	useEffect	useLayoutEffect
실행 시점	랜더링이 완료되는 시점 (렌더링 후 화면에 직접적인 영향 없음)	랜더링 후 DOM이 업데이트 되기 직전 (화면이 그려지기 전)
동기/비동기	비동기적	동기적
예시	사용자 데이터를 API에서 가져옴 (데이터 렌더링 후 화면 업데이트) 이벤트 리스너를 추가함	DOM 크기를 측정해서 다른 요소 위치 조정 (요소 높이 측정해 레이아웃 높이 조정)
코드	useEffect(()=> {   fetchData().then(data=>setData(data)); },[]);	useLayoutEffect(()=>{ const height=ref.current.offsetHeight; setHeight(height); },[]);
참고	기본적으로 사용	너무 많이 실행되면 렌더링 느려짐

 

---

useEffect 호출 시점은 언제인가?

useEffect는 컴포넌트의 life cycle에 따라 특정 작업을 수행할 수 있도록 도와주는 

컴포넌트가 마운트, 업데이트, 언마운트되는 시점에 자동으로 호출 됨

 

useEffect의 구조

useEffect(() => {
  // 실행할 작업 (부수 효과)
  return () => {
    // 정리 작업 (클린업 함수)
  };
}, [dependencies]); // 의존성 배열

• 첫 번째 매개변수: 함수
  • 컴포넌트 특정 시점(마운트, 업데이트)에 실행됨
  • 내부에서 데이터를 불러오거나, 이벤트 리스너를 등록하거나, DOM을 조작하는 등 작업
• 두 번째 매개변수: 의존성 배열(dependencies)
  • useEffect가 실행되어야 할 조건을 명시함
  • 의존성 배열이 있는 경우: 의존성 배열에 포함된 값이 변경될 때만, useEffect가 다시 호출됨
  • 의존성 배열이 비어있는 경우: 컴포넌트의 최초 렌더링 시에만 useEffect가 실행됨
  • 의존성 배열이 없는 경우: 매 렌더링마다 실행됨
• return 값: 클린업 함수
  • return 함수는 컴포넌트가 언마운트되거나, 의존성 배열 값이 업데이트되기 직전에 실행됨
  • 메모리 누수를 방지하고, 리소스를 해제하는 데 유용함(타이머 정리, 구독 해제, 이벤트 리스너 제거)

 

[1] 컴포넌트 마운트: 컴포넌트가 처음 화면에 렌더링 된 후, 필요한 초기 작업 수행

데이터 초기화, api 호출, 이벤트 리스너 등록 등을 수행할 수 있음

useEffect(() => {
  console.log('컴포넌트가 마운트되었습니다.');
  fetchData();
}, []); // 빈 배열 -> 최초 렌더링 시 1회만 실행

 

[2] 컴포넌트 업데이트: 의존성 배열에 지정된 값이 변경될 때마다

props나 state가 변경되었고, 해당 값이 의존성 배열에 포함되어 있을 경우에 호출됨

useEffect(() => {
  console.log(`count 값이 ${count}로 변경되었습니다.`);
}, [count]); // count가 변경될 때 실행

 

클린업 함수 예시, count 값 변경 전에 기존 count값을 클린업하는 경우

useEffect(() => {
  console.log(`count 값이 ${count}로 업데이트되었습니다.`);
  return () => {
    console.log(`이전 count 값 ${count}에 대한 클린업 실행`);
  };
}, [count]);

 

[3] 컴포넌트 언마운트: 화면에서 컴포넌트가 제거됨

이벤트 리스너 제거나 구독 해제 같은 정리 작업을 진행함

useEffect(() => {
  const handleScroll = () => console.log('스크롤 중');
  window.addEventListener('scroll', handleScroll);

  return () => {
    console.log('컴포넌트가 언마운트되었습니다. 이벤트 리스너를 제거합니다.');
    window.removeEventListener('scroll', handleScroll);
  };
}, []);

---

출처

[1] 2025.01.13. [매일메일] 프론트엔드 질문 https://www.maeil-mail.kr/

[2] 매일메일. 250128. useEffect가 호출되는 시점에 대해 설명해 주세요. 64번. https://maeil-mail.kr 

[3] React 공식 독스. Effect Hook https://ko.legacy.reactjs.org/docs/hooks-effect.html