🚀 Component의 LifeCycle

💡 Component의 Lifecycle은, component가 하나의 노드로 DOM에 올라가고, 수정되고, 내려오는 과정으로 구성된다.
👉 즉, "mounting" (adding nodes to the DOM), "unmounting" (removing them from the DOM), and "updating" (making changes to nodes already in the DOM) 으로 이루어진다.

📌 Mount 마운트

• 컴포넌트의 인스턴스가 생성되어 DOM 상에 삽입되는 것.
  리액트에서는 컴포넌트를 특정 영역에 끼워넣는 행위를 가리킨다.

• 예로 ReactDOM.render 함수를 통해서 DOM의 특정 영역에 리액트 컴포넌트를 끼워 넣을 수 있고, 이러한 과정을 마운트한다고 표현한다.

• < Rendering과 Mounting >
  👉 "Rendering" is any time a function component gets called or a class-based render method gets called which returns a set of instructions for creating DOM.
  👉 "Mounting" is when React "renders" the component for the first time and actually builds the initial DOM from those instructions.
  👉 렌더링은 컴포넌트가 DOM을 만드는 명령들을 반환하는 함수가 호출되는 것을 말하고, 마운팅은 컴포넌트를 처음으로 렌더링하는 것을 의미한다.

• mount 단계의 class component lifecycle methods
  1. constructor()
  2. static getDerivedStateFromProps()
  3. render()
  4. componentDidMount()
  

📌 Update 업데이트

• 이미 mount 되어 DOM에 존재하는 컴포넌트를 re-rendering 하여 업데이트 하는 것. (새로 mount 하는 것 아님.)

• A "re-render" is when React calls the function component again to get a new set of instructions on an already mounted component. Re-renders just update the DOM but don't mount since mounting just happens once.

• 컴포넌트는 아래의 네 가지 경우에 업데이트 된다.
  - props가 바뀔 때
  - state가 바뀔 때
  - 부모 컴포넌트가 리렌더링될 때
  - this.forceUpdate로 강제로 렌더링을 트리거할 때

• update 단계의 class component lifecycle methods
  1. static getDerivedStateFromProps()
  2. shouldComponentUpdate()
  3. render()
  4. getSanphotBeforUpdate()
  5. componentDidUpdate()

📌 Unmount 언마운트

• 마운트의 반대 과정. 컴포넌트가 DOM에서 제거되는 것

• unmount 단계의 class component에서는 componentWillUnmount() method가 호출된다.

---

References

• State and Lifecycle - React Docs
• React.Component - React Docs
• React Training: React: "mount" vs "render"?
• React Lifecycle Methods Diagram - github.com/wojtekmaj
• 책 <리액트를 다루는 기술>