React / useEffect의 3가지 기능

 

 

 

1. 컴포넌트가 화면에 처음 렌더링 될 때 동작한다. (Mount Effect)

 

- [ ] 빈 배열을 두 번째 인자로 전달하면, 컴포넌트가 처음 나타날 때 한번만 실행된다.

- 초기 데이터 fetch, 구독 설정 등에 사용된다. 

 

useEffect(()=>{

    console.log("처음 한 번만 실행");

}, [ ]);

 

2. 특정 값이 변경될 때 실행되는 동작(update Effect / Dependency Effect)

 

- 의존성 배열에 넣은 값이 바뀔 때마다 effect가 실행된다.

- 상태 변화에 따라 API 재요청, 계산 업데이트 등에 사용된다.

 

useEffect(()=> {

  console.log("count가 바뀔 때 실행");

}, [count]);

 

3. 컴포넌트가 사라질 때 정리 작업 실행(unmount Effect)

 

- 이벤트 리스너 제거, setInterval 정리, 구독 해제 같은 뒷정리 작업등에 사용된다.

- return문 안에 정리 코드를 작성한다.(종료할때 return문 반환후 해당 컴포넌트 종료)

 

useEffect(()=> {

  const timer = setInterval(() => console.log("tick"), 1000);

  return () => {

    clearInterval(timer);

    console.log("컴포넌트 unmount - 타이머 정리!");

  }

}, [ ]);