[React] useEffect, useLayoutEffect

useEffect 란?

• 외부 시스템과 컴포넌트를 동기화시켜주는 React Hook

  • 외부 세계와 상호작용하면서 (state로 관리하지 않은 외부값)
  • 해당 컴포넌트의 렌더링, 성능에는 여향을 미치지 않도록 만들어주는 도구

• React 컴포넌트에서 side effect를 수행하기 위해 사용되는 훅

  • ex. 데이터 패치, 구독 설정, DOM 수동 조작 등

  • 순수 함수의 범위를 벗어나는 모든 연산

    → component가 순수함수가 되기 위해 따로 관리

• mount, unmount, update 시 특정 작업 실행 가능

  • mount : 컴포넌트가 최초로 렌더링될 때
  • unmount : 컴포넌트가 화면에서 사라질 때
  • update : 컴포넌트가 업데이트될 때
  
  
  

useEffect 사용법

• useEffect(() => effect 함수, deps 배열);
  • effect 함수 : side effect를 실행하는 콜백함수
  • deps 배열 : 의존성 배열, function을 실행시킬 조건 (선택적)
    
    
    
    

의존성 배열에 따른 핸들링 시기

1. deps가 빈 배열 일 때
   • useEffect(() => { ... }, []);
   • 처음 컴포넌트 렌더링될 때만 콜백함수 실행 (Mount)
2. deps 생략했을 때
   • useEffect(() => { ... });
   • 렌더링될 때마다 실행
3. deps에 검사할 값을 넣었을 때
   • useEffect(() => { ... }, [ ... ]);
   • 배열 내부 값을 이전 값과 비교
   • 변경됐을 때 콜백함수 실행
     
     
     
     

Clean-Up 함수

• useEffect 에서 반환되는 함수
• side effect의 종류
  1. clean-up이 필요한 경우
  2. clean-up이 필요하지 않은 경우 (ex. DOM 수동 조작 등)
• 작동 순서

  1. component unmount

  2. clean-up 함수 실행

  3. component mount

  4. effect 실행

      useEffect(() => {
         // mount, update 시점에 실행
         return () => {
           // unmount, update직전 시점에 실행
         };
       }, [deps]);

• 필요성
  • setInterval , setTimeout , effect에서 생성한 이벤트 리스너의 구독 취소가 필요한 경우
  • 리렌더링 됐을 때 React가 effect를 실행하기 전에 이전의 렌더링에서 파생된 effect를 정리
• 사용법
  • unmount된 이후에도 interval 발생 → 메모리 누수

    useEffect(() => {
    	setInterval(() => setCount(prev => prev + 1), 1000);
    }, []);

  • Clean-up 함수 사용

    useEffect(() => {
    	const timer = setInterval(() => setCount(prev => prev + 1), 1000);
    	return () => clearInterval(timer);   // 클린업 함수
    }, []);

Clean한 useEffect 사용

• 단일 목적의 useEffect

  • 클린 코드 : 함수는 한 가지 목적만
  • 작고 단순한 단일 목적의 함수로 분리 → side-effect 방지 가능
    
  • 한 번 상태 변경으로 상관없는 다른 부분까지 업데이트 발생

• 가능하다면 커스텀 훅 사용

  • 유지 보수 간편
  • 가독성 증가

• useEffect 내에서 사용하는 모든 변수들을 의존성 배열에 추가

• 나중에 읽어봐야지 (영어 실력이 좋아진다면 ~

  A Complete Guide to useEffect — overreacted
  
  
  
  

useLayoutEffect

• 브라우저 렌더링 과정
  • Render DOM Tree 구성하기 위해 각 element의 스타일 속성 계산
  • Paint 실제 스크린에 layout 표시하고 업데이트
• 사용법

  useLayoutEffect(() => {
    // input 요소에 포커스 맞추기
  	inputRef.current.focus();
  }, []);

• useEffect vs. useLayoutEffect

  	useEffect	useLayoutEffect
  실행 시점	Paint 이후 effect 실행	Paint 직전 effect 실행
  동기/비동기	비동기적 실행	동기적 실행
  사용 의도	대부분의 side effect 처리	DOM의 읽기나 수정이 필요한 경우 사용, 애니메이션 효과나 포커스 관리에 적합
  장점	DOM 조작이 필요없는 작업 처리할 때, 성능 저하없이 사용	화면에 그려지기 전에 완료 → 화면 깜짝임 방지
  단점	화면 그려진 후 작업 → 화면 깜빡임	렌더링 프로세스 지연 → 성능 저하