useEffect no dependency

💡의존성 배열 전달 안할 시 모든 상황에서 실행되기에 불필요한 상황에서 실행될 가능성이 농후하므로 일반적으로 의존성 배열을 지정한다.

매개변수 / 의존성

컴포넌트가 DOM에 추가되면 실행되는 셋업 함수

컴포넌트가 DOM에 제거되면 실행되는 클린업 함수 (+의존성이 변경 되어 리렌더링 할 때)

셋업 함수 내 참조된 모든 변수와 함수로 의존성 변경시 리렌더링 과정을 거친다.

useEffect(() => {
    //셋업 함수부
    console.log('setup');
    
    return () => {
      //클린업 함수부
      console.log('cleanup');
    }
  }, [의존성...]);

useEffect 로직

기본	기본 컴포넌트 추가 > 셋업 함수
클린업 함수 추가	컴포넌트 추가 > 셋업 함수 > 컴포넌트 제거 > 클린업 함수
리렌더링	컴포넌트 추가 > 셋업 함수 > 의존성 변경 리렌더링 > 클린업 함수 > 셋업 함수

주의 사항

1. Strirct 모드로 인해 useEffect가 2번 호출된다. 실제 셋업 전 셋업 + 클린업 함수 사이클 테스트하는 것 이므로 필요가 없을 때에만 제거
2. 시각적인 작업, 화면 지연이 인식되는 경우 useLayoutEffect로 대체 시 브라우저가 화면을 그리기 전에 호출할 수 있다.

의존성에 따른 useEffect 로직

💡의존성 배열 전달 안할 시 모든 상황에서 실행되기에 불필요한 상황에서 실행될 가능성이 농후하므로 일반적으로 의존성 배열을 지정한다.

의존성 유무	실행 상황
의존성 배열 전달	초기 렌더링, 의존성 변경으로 인한 리렌더링
빈 의존성 배열 전달	초기 렌더링
의존성 배열 전달 안함.	모든 렌더링(+리 렌더링)