React 라이프사이클 메서드 이해하기

https://ko.wikipedia.org

<"리액트를 다루는 기술" 책 참조>

---

컴포넌트 라이프사이클 메서드 이해하기

• 라이프사이클 메서드의 종류는 총 9가지
• Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드
• Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드
• 라이프사이클은 총 세 가지 마운트, 업데이트, 언마운트 카테고리로 나눈다. 

마운트

- DOM(문서 객체 모델, Document Object Model)이 생성되고 웹 브라우 저상에 나타나는 것.

- 위와 같은 마운트 시 사용하는 다음 메서드를 호출

1. constructor - 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
2. getDerivedStateFromProps - props에 있는 값을 state에 넣을 떄 사용하는 메서드
3. render - 우리가 준비한 UI를 렌더링 하는 메서드
4. componentDidMount - 컴포넌트가 웹 브라우 저상에 나타난 후 호출하는 메서드

* DOM

1. HTML, XML 문서에 접근하기 위한 일종의 인터페이스이다.
2. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있는 API를 제공한다.

 

업데이트

- props가 바뀔 때

- state가 바뀔 때

- 부모 컴포넌트가 리 렌더링 될 때

- this.forceUpdate로 강제 렌더링을 트리거할 때

- 위와 같이 컴포넌트를 업데이트할 때 다음 메서드를 호출.

1. getDerivedStateFromProps - 마운트 과정시 호출되며, 업데이트가 시작하기 전에 호출,
2. shouldComponentUpdate - 컴포넌트가 리 렌더링을 해야 할지 말아야 할지를 결정하는 메서드, true 반환값시 리렌더링 false 반환값시 리렌더링 중지 (this.forceUpdate() 함수를 호출하면 과정 생략하고 바로 render 함수로 이동)
3. render - 컴포넌트를 리 렌더링함.
4. getSnapshopBeforeUpdate - 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 함수.
5. componentDidUpdate - 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

* 렌더링(render) - 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정

 

원마운트

- 마운트의 반대 과정

- 컴포넌트를 DOM에서 제거하는 것을 언마운트.

- 언마운트시 다음 메서드를 호출

1. componentWillUnmonut - 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드

 

 

<출처> https://medium.com/@nancydo7/understanding-react-16-4-component-lifecycle-methods-e376710e5157