React LifeCycle과 Mount,Render, 그리고 useEffect

React component는 Life Cycle을 가집니다. 이를 알고 있으면 원하는 기능을 적재적소에 넣을 수 있습니다.
Life Cycle은 '마운트-업데이트-마운트해제'(+오류처리)로 순환합니다. 아래에서 더 알아봅시다.
더불어 Life Cycle을 관통하는 effect hook도 함께 알아봅니다.

mount

• component가 처음으로 rendering을 합니다.
• 해당 component의 DOM node를 만들어, DOM container에 DOM node를 삽입합니다.
• 다음의 메서드들은 component의 인스턴스가 생성되어 DOM 상에 삽입될 때에 순서대로 호출됩니다.(함수형 컴포넌트)
  render()
  useEffect()

** render
component가 DOM을 만드는 명령들을 반환하는 함수(render() 메서드)가 호출되는 것을 말합니다.

update

• props 또는 state가 변경되면 갱신이 발생합니다.
  - 특정 props 또는 state가 변경될 때만 useEffect()를 실행할 수 있습니다.
• 다시 렌더링이 발생할 때 render()메서드가 호출됩니다.

unmount

• component가 DOM 상에서 제거됩니다.
• useEffect에서 clean-up함수가 실행됩니다.

useEffect

• 함수형 component에서 사용됩니다.
• React hook의 한 종류입니다.
• react가 DOM을 업데이트 한 후 실행됩니다.
• effect를 해제해야 한다면 해제하는 함수(clean-up)를 반환해야 합니다.

References
https://ko.reactjs.org/docs/react-component.html#the-component-lifecycle
https://ko.reactjs.org/docs/hooks-effect.html