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

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다.

 

학습 범위:  p172 ~p.188

 

새로 알게된 사실

 

1. 모든 리액트 컴포넌트에는 라이프사이클(생명주기)이 존재한다.

 

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

 

3. 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다.

 

4. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다.

 

5. Did 접두사가 붙은 메서드는 어떤 작업을 작동 한 후에 실행되는 메서드이다.

 

6. 라이프 사이클은 총 세가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다.

 

 

※중간정리

 

마운트

 

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

(이것은 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.)

 

• getDerivedStateFromProps: props에 있는 값을 state에 넣을 때 사용하는 메서드입니다.

(props로 받아온 값을 state로 동기화시키는 용도. 컴포넌트가 마운트될때와 업데이트될 때 호출)

 

• render: 우리가 준비한 UI를 렌더링하는 메서드입니다.

 

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

(이것은 컴포넌트를 만들고 첫 렌더링을 다 마친 후에 실행된다. 이 안에서 다른 JS 라이브러리 또는 프레임워크의 함수를 호출하거나

이벤트 등록, setTimeout, setInterval, 네트워크 요청 같은 비동기 작업을 처리하면 된다.)

 

 

 

업데이트

▲ 그림 7-3 업데이트할 때 호출하는 메서드

 

• getDerivedStateFromProps: 이 메서드는 마운트 과정에서도 호출되며, 업데이트가 시작하기 전에도 호출됩니다. props의 변화에 따라 state 값에도 변화를 주고 싶을 때 사용합니다.

• shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드입니다. 이 메서드에서는 true 혹은 false 값을 반환해야 하며, true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고, false를 반환하면 작업을 중지합니다. 즉, 컴포넌트가 리렌더링되지 않습니다. 만약 특정 함수에서 this.forceUpdate() 함수를 호출한다면 이 과정을 생략하고 바로 render 함수를 호출합니다.

• render: 컴포넌트를 리렌더링합니다.

• getSnapshotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드입니다.

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

 

 

언마운트

마운트의 반대 과정, 즉 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 합니다.

▲ 그림 7-4 언마운트할 때 호출하는 메서드

 

• componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드입니다.

 

 

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

 

8.

1)componentWillMount: 렌더링 되기전에

2)componentDidMount: 렌더링이 된 다음

3)componentWillReceiveProps: 새로운 props를 받았을때

4)shouldComponentUpdate :컴포넌트가 업데이트를 해야할지 말아야할지

=> 컴포넌트가 리렌더링을 해야할지 말아야할지를 결정하는 메서드. 

      이 메서드에서는 true, false 값을 반환해야하며, true를 반환하면 다음 라이프사이클 메서드를 실행하고, false를 반환하면 작업을

      중지한다.

5)componentWillUpdate: 컴포넌트 업데이트 되기전에

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

7)componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드.

 

9. render() 함수

 

이 메서드는 컴포넌트 모양새를 정의한다. 그렇기에 컴포넌트에서 가장 중요한 메서드라고 할 수 있다.

라이프사이클 메서드 중 유일한 필수 메서드이기도 하다.

이 메서드 안에서 this.props, this.state에 접근할 수 있으며 리액트 요소를 반환한다.

(여기서 요소는 div 같은 태그가 될 수 도 있고, 따로 선언한 컴포넌트가 될 수도 있다.)

아무것도 보여주고 싶지 않다면 null 값이나 false 값을 반환하자. 

이 메서드 안에서는 이벤트 설정이 아닌 곳에서 setState를 사용하면 안되며, 브라우저의 DOM에 접근해서도 안된다.

DOM 정보를 가져오거나 state에 변화를 줄 때는 componentDidMount에서 처리해야 한다.

 

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

 

11. 컴포넌트는 네가지 경우에 업데이트를 진행한다.

- props가 바뀔 때

: 부모 컴포넌트에서 넘겨주는 props가 바뀔 때. 컴포넌트에 전달하는 Props의 값이 바뀌면 컴포넌트 렌더링이 이루어진다.

- state가 바뀔때

: 자신이 들고 있는 state가 setState를 통해 업데이트 될 때.

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

: 자신에게 할당된 props가 바뀌지 않아도, 자신이 들고 있는 state가 바뀌지 않아도, 부모 컴포넌트가 리렌더링 되면 자식 컴포넌트 또한      리렌더링 된다. 

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

 

12. componetDidUpdate: 컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드이다.

 

13. 언마운트: 마운트의 반대과정이다. 즉, 컴포넌트를 DOM에서 제거하는 것을 언마운트(unmount)라고 한다.

 

14. componentWillUnmount: 컴포넌트가 웹 브라우저상에서 사라지기 전에 호출하는 메서드이다.