[React] React의 LifeCycle 정리

벨로퍼트님의 리액트 책을 보고 정리한 내용이다. 중요한 메서드 위주로만 정리했다. (get~ 이런건 제외함)

 

- 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.

- 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있다. Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다.

- 크게 마운트, 업데이트, 언마운트로 나뉜다.

 

마운트

- DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 한다.

1. constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드

2. render; UI를 렌더링하는 메서드

3. componentDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드

 

업데이트

- 컴포넌트가 업데이트 될 때 호출되는 것

1. shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드. 이 메서드에서는 true 혹은 false 값을 반환하고, true면 다음 라이프사이클을 실행하고 false면 작업을 중지한다.

2. componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드

 

언마운트

- 마운트의 반대 과정. 컴포넌트를 DOM에서 제거한다.

1. componentWillUnmount

 

1. render 함수

- 컴포넌트 모양새를 정의한다. 유일한 필수 메서드. 

- 리액트 요소를 반환한다.

- 이 메서드 안에서는 setState를 사용하면 안되고, DOM에 접근해서도 안된다. 이런 행동은 componentDIdMount에서 처리해야 한다.

 

2. constructor 함수

- 컴포넌트 만들 때 처음으로 실행되는 메서드. 초기 state를 정할 수 있다.

 

3. componentDidMount 함수

- 첫 렌더링을 다 마친 후 실행됨. 다른 자바스크립트 라이브러리 또는 프레임워크의 함수 호출, 이벤트 등록, 비동기 작업을 처리한다.

 

4. shouldComponentUpdate 함수

- props or state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드. 반드시 true or false를 지정해야함.

- 프로젝트 성능을 최적화할때 사용한다ㅏ.

 

5. componentDidUpdate 함수

- 리렌더링을 완료한 후 실행함. DOM 처리 가능. 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있음.

 

6. componentWillUnmount 함수

- 컴포넌트를 DOM에서 제거할 때 실행됨. 등록된 이벤트, 타이머, 직접 생성한 DOM은 여기서 삭제한다.