컴포넌트 생명 주기: 클래스형 vs 함수형

요약

1. 클래스형 컴포넌트: 상태가 업데이트 -> 기존 인스턴스의 상태 값만 변경
2. 함수형 컴포넌트: 상태 업데이트 -> 함수 전체를 다시 호출 -> 새 컴포넌트 생성

useEffect와 함수형 컴포넌트 생명주기

Effect function

useEffect의 첫 번째 전달인자로 들어가는 함수를 effect function이라고 한다. 이 함수가 실행되는 시점은 두 번째 전달인자(의존성 배열)에 따라 달라진다.

• 없으면: 마운트 + 모든 리렌더 시점
• 빈 배열: 마운트
• 배열 안에 요소 있으면: 마운트 + 배열 안 요소의 값이 바뀔 때

// 1. 모든 렌더링마다 실행 (마운트 + 모든 업데이트)
useEffect(
	() => console.log("---- effect function called")
)

// 2. 마운트 시에만 실행
useEffect(
	() => console.log("---- effect function called"),
	[]
)

// 3. 마운트 + 의존성 변경 시 실행
useEffect(
	() =>  console.log("---- effect function called");,
	[apple, banana]
)

Cleanup function

useEffect가 반환하는 함수를 cleanup function이라고 한다. 이는 effect function이 만든 부작용(부수적 효과, side-effect)를 정리하는 데에 사용된다.

실행 시점

• 리렌더, 함수를 새로 호출 -> 새 함수의 effect function 실행 직전에 cleanup function 호출
• Unmount -> 컴포넌트 제거 -> cleanup function 호출

// 업데이트, 리렌더 -> 함수 호출, 새 component 생성 -> 새 effect function 호출 직전에 이전 effect function의 cleanup function 호출됨
useEffect(
    () => {
      console.log("---- effect function called")
      const timer = setTimeout(() => console.log("---- waited for 10 sec"), 10000)

      return () => {
        clearTimeout(timer) // 직접 side effect 정리해야 함
        console.log("---- cleaned up timeout")
      }
    }
  )

첨언

state이 바뀌면 컴포넌트 리렌더가 일어난다. 무조건
리렌더는 업데이트이기 때문에 useEffect, useMemo를 통해 함수 재호출을 피할 수 있다.
다면 useCallback은 함수의 재정의를 막는 것이지, 컴포넌트에서 호출이 되고 있다면 그건 리렌더가 일어날 때마다 또 다시 일어난다.

update: state이 바뀐다, parameter가 바뀐다
mount: 최초 로딩에만