SPA - LifeCycle

라이프 사이클

Vue

create

• beforeCreate
  • 컴포넌트 생성자
  • 인스턴스 생성, 상태 설정 및 초기화 전에 진행
  • DOM 추가 전이기 때문에 DOM 접근 불가능
• created
  • 컴포넌트 인스턴스 생성, 데이터, 이벤트 초기화 이후 호출
  • DOM 추가 전이기 때문에 DOM에 접근 불가능

mount

• beforeMount
  • 컴포넌트가 마운트되기 전 호출
  • 컴포넌트의 템플릿이 컴파일
  • 실제 DOM과 연결되기 직전 단계로 DOM 접근 불가능
• mounted
  • 컴포넌트가 DOM에 마운트된 후 호출
  • 컴포넌트의 템플릿이 실제 DOM에 렌더링된 이후의 상태
  • 비동기 작업(사용자 요청 API, 기타 작업 등)을 수행하기 적합한 단계

update

• beforeUpdate
  • state나 props, 부모 컴포넌트에서 데이터 변경 등 렌더링을 다시 해야 하는 상황에 렌더링 전 호출
  • 데이터 변경 전 컴포넌트 state에 대해 처리할 작업을 진행할 수 있음
• updated
  • 재렌더링 이후 호출
  • 가상 DOM이 실제 DOM에 반영

unMount

• beforeUnmount
  • 컴포넌트가 언마운트(DOM에서 제거되기 전) 되기 전 호출
  • 컴포넌트 제거 전 해야하는 선행 작업, 이벤트 해제 수행 가능
• unmounted
  • 컴포넌트가 언마운트된 후 호출
  • unmount된 컴포넌트 관련 리소스나 메모리 해제 작업 가능

React

mounting

• constuctor
  • 컴포넌트가 새로 생성되고 렌더링 전 수행
  • state 설정 및 초기화 작업할 때 사용
  • 생성한 함수 바인딩할 때 사용
• render
  • 컴포넌트를 렌더링해 반환
  • 렌더링 결과는 실제 DOM에 반영되어 화면에 출력
• componentDidMount
  • 컴포넌트가 DOM에 마운트된 후 호출 즉, render 이후 화면에 출력 됐을 때 호출
  • 외부 데이터나 초기 설정 수행 가능
  • 비동기 작업(사용자 요청 API, 기타 작업 등)을 수행하기 적합한 단계

updating

• shouldComponentUpdate
  • 컴포넌트 재렌더링 여부 결정 메서드로 성능 최적화에 활용
  • false를 반환하면 렌더링 하지 않음
• componentDidUpdate
  • state나 props 변경 등 렌더링을 다시 해야 하는 상황에 재렌더링이 완료된 후 호출
  • componentDidMount와 마찬가지로 비동기 작업(사용자 요청 API, 기타 작업 등)을 수행하기 적합한 단계

unMounting

• componentWillUnmount
  • 컴포넌트가 언마운트되기 전에 호출
  • 컴포넌트가 사용하는 리소스나 메모리 해제 작업을 수행할 수 있음
  • 이벤트 리스너 제거 등을 수행하기에 적합한 단계

요약

• 프레임워크나 라이브러리마다 명칭은 다르지만 전체적인 프로세스는 유사하고, 각 과정마다 할 수 있는 작업이나, 하는 작업들은 유사하다.
• 컴포넌트는 생성(create) -> 마운트(mount) -> 업데이트(update) -> 소멸(unmount)의 단계를 거친다.