React Life Cycle

Life Cycle

mount : dom이 생성되고 브라우저 화면에 나타날때를 의미
update : 컴포넌트의 state, props가 변경되고 화면에 다시 그려질때를 의미
unmount : dom이 브라우저 화면에서 사라질때를 의미

클래스형 컴포넌트의 life cycle

mount

• componentDidMount, ... 컴포넌트가 mount 될때 특정 이벤트를 실행할 수 있다.

update

• componentDidUpdate, ... 컴포넌트가 update 될때 특정 이벤트를 실행할 수 있다.

unmount

• componentWillUnmount, ... 컴포넌트가 unmount 되기 직전 특정 이벤트를 실행할 수 있다.

함수형 컴포넌트의 life cycle

• 함수형 컴포넌트에서는 hook을 사용해서 life cycle 주기에 맞춰 특정 이벤트를 실행할 수 있다.

mount

• 컴포넌트가 mount될때 useEffect의 effect함수가 실행

update

• 컴포넌트가 update될때 useEffect의 effect함수가 재실행(의존성 배열에 변경되는 값이 있는 경우)

unmount

• 컴포넌트가 unmount될때 useEffect의 cleanup함수가 실행

useEffect의 실행 타이밍

• 의존성배열이 생략인 경우

  • effect 함수
    • 컴포넌트가 처음 마운트될때 → effect함수 실행
    • 컴포넌트가 리렌더링될때 → effect함수 실행
    • 컴포넌트가 언마운트될때 → 실행안함
  • cleanup 함수
    • 컴포넌트가 처음 마운트될때 → 실행안함
    • 컴포넌트가 리렌더링될때 → 이전 useEffect의 cleanup 함수 실행
    • 컴포넌트가 언마운트될때 → 언마운트 직전에 해당 useEffect의 cleanup 함수 실행

• 의존성배열이 []인 경우

  • effect 함수
    • 컴포넌트가 처음 마운트될때 → effect함수 실행
    • 컴포넌트가 리렌더링될때 →실행안함
    • 컴포넌트가 언마운트될때 → 실행안함
  • cleanup 함수
    • 컴포넌트가 처음 마운트될때 → 실행안함
    • 컴포넌트가 리렌더링될때 → 실행안함
    • 컴포넌트가 언마운트될때 → 언마운트 직전에 해당 useEffect의 cleanup 함수 실행

• 의존성배열에 특정값 넣을 경우

  • effect 함수
    • 컴포넌트가 처음 마운트될때 → effect함수 실행
    • 컴포넌트가 리렌더링될때 → effect함수 실행(의존성배열의 값이 변경되는경우에만 해당)
    • 컴포넌트가 언마운트될때 → 실행안함
  • cleanup 함수
    • 컴포넌트가 처음 마운트될때 → 실행안함
    • 컴포넌트가 리렌더링될때 → 이전 useEffect의 cleanup 함수 실행
      
    • 컴포넌트가 언마운트될때 → 언마운트 직전에 해당 useEffect의 cleanup 함수 실행

참고)의존성 배열의 값이 변경될 경우에 한해서만 cleanup함수가 실행된다.
변경이 없으면 애초에 다음 useEffect가 실행이 되지 않기 때문에 이전 cleanup함수도 실행되지 않는다.