[리액트를 다루는 기술] 7장 컴포넌트의 라이프사이클 메서드

7장 컴포넌트의 라이프사이클 메서드

7.1 라이프사이클 메서드의 이해

● 컴포넌트의 라이프사이클

1. 마운트

: DOM이 생성되고 웹 브라우저상에 나타나는 것

 

▶ 마운트할 때 호출하는 메서드

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

 

2. 업데이트

: 컴포넌트 정보를 업데이트하는 것

 

▶ 컴포넌트가 업데이트 하는 경우

• props가 바뀔 때
• state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때
• this.forceUpdate로 강제로 렌더링을 트리거할 때

 

▶ 업데이트할 때 호출하는 메서드

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

 

3. 언마운트

: 컴포넌트를 DOM에서 제거하는 것

 

▶ 언마운트할 때 호출하는 메서드

• componentWillUnmount

 

7.2 라이프사이클 메서드 살펴보기

● render() 함수

: 컴포넌트 모양새를 정의

 

• this.props와 this.state에 접근할 수 있다
• 리액트 요소를 반환한다
• 이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안된다
• 브라우저의 DOM에 접근하면 안된다

 

● constructor 메서드

: 컴포넌트의 생성자 메서드

 

• 초기 state를 정할 수 있다

 

● getDerivedStateFromProps 메서드

: props로 받아 온 값을 state에 동기화시키는 메서드

 

• 컴포넌트가 마운트될 때와 업데이트될 때 호출된다

 

● componentDidMount 메서드

: 컴포넌트를 만들고, 첫 렌더링을 다 마친 후 실행되는 메서드

 

• 다른 자바스크립트 라이브러리 또는 프레임워크의 함수를 호출
• 이벤트 등록, setTimeout, setInterval, 네트워크 요청같은 비동기 작업 처리

 

● shouldComponentUpdate 메서드

: props 또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드

 

• 이 메서드에서는 반드시 true 값 또는 false 값을 반환해야 한다
• 이 메서드를 따로 생성하지 않으면 true로 반환

 

● getSnapshotBeforeUpdate 메서드

: render에서 만들어진 결과물이 브라우저에 실제로 반영되기 직전에 호출되는 메서드

 

• 이 메서드에서 반환하는 값은 componentDidUpdate에서 세 번째 파라미터인 snapshot 값으로 전달받을 수 있다
• 주로 업데이트하기 직전의 값을 참고할 때 사용

 

● componentDidUpdate 메서드

: 리렌더링을 완료한 후 실행되는 메서드

 

• DOM관련 처리를 해도 무방
• prevProps, prevState를 사용하여 컴포넌트가 이전에 가졌던 데이터에 접근할 수 있다
• getSnapshotBeforeUpdate에서 반환한 값이 있다면 여기서 snapshot 값을 전달받을 수 있다

 

● componentWillUnmount 메서드

: 컴포넌트를 DOM에서 제거할 때 실행하는 메서드

 

● componentDidCatch 메서드

: 컴포넌트 렌더링 도중에 에러가 발생했을 때 오류 UI를 보여줄 수 있게 해주는 메서드

 

• error : 파라미터에 어떤 에러가 발생했는 지 알려준다
• info : 어디서 오류가 발생했는지에 대한 정보 알려준다
• 이 메서드는 this.props.children으로 전달되는 컴포넌트에서 발생하는 에러만 잡아낼 수 있다

 

7.3 라이프사이클 메서드 사용하기

1. LifeCycleSample 컴포넌트 만들기
2. App에 렌더링하기
3. 버튼 누르고 콘솔 창 관찰하기