위의 함수들은 React.Component class에서 제공하는 메서드이다. 컴포넌트를 만들 때 class로 생성하면 위의 메서드를 사용할 수 있고 컴포넌트의 라이프사이클에 따라 각자의 메서드가 호출된다
The Component Lifecycle
Mounting
마운트는 컴포넌트가 생성되고 DOM 객체에 들어가 브라우저에 나타나는 것을 의미한다. 이때 다음의 순서로 함수가 호출된다.
1. constructor()
스테이트 값을 초기화하거나 메소드를 바인드하지 않는다면 constructor()를 실행할 필요 없다.
리액트 컴포넌트가 마운트 되기 전에 constructor가 불린다. React.Component의 서브클래스를 위해 constructor를 실행할 때 다른 서술 전에 super(props)를 불러야만 한다. 그렇지 않으면 constructor 안에서 this.props는 undefined가 될 것이다.
보통 리액트에서 컴포넌트는 두 가지 목적을 위해 사용된다.
- 객체를
this.state로 할당함으로써local state를 초기화할 때 event handler메소드를 instance에 바인딩할 때
constructor(props) {
super(props);
// Don't call this.setState() here!
this.state = { counter: 0 };
this.handleClick = this.handleClick.bind(this);
}2. render()
이 메소드는 클래스 컴포넌트에서 필수적인 메소드이다.
render()가 불릴 때는 this.props와 this.state를 검사해야하고 다음의 타입 중 하나를 리턴해야한다.
- React elements 보통 JSX를 통해 만들어진다. 예를 들어
<div />와<MyComponent />는 리액트에게 DOM노드 혹은 사용자가 정의하는 컴포넌트를 랜더링해달라고 지시하는 리액트 요소이다. - Array and fragments
render()을 통하여 여러 개의 엘리먼트를 반환한다. (투비컨티뉴) - Portals 별도의 DOM 하위 트리에 자식 엘리먼트를 랜더링되게 한다. (투비컨티뉴)
- String and numbers DOM상에 text node로서 랜더링된다.
- Booleans or null 아무것도 랜더링하지 않는다. 보통 test가 불리안일 때
return test && <Child />를 지원하기 위해서 존재하며 여기서test는 불리안값이다.
render()는 pure해야한다. 다시 말해 컴포넌트의 스테이트 값을 수정해서는 안된다. 그리고 브라우저와 직접적으로 상호작용할 수 없다.
브라우저와 상호작용이 필요할 때는 componentDidMount()나 다른 라이프사이클 메소드에서 작업을 수행하자.
3. componentDidMount()
componentDidMount()componentDidMount()는 컴포넌트가 마운트된 직후에 불려진다. DOM 노드를 필요로 하는 초기화가 이곳에 와야한다. 만약 멀리 있는 엔드포인트로부터 데이터를 가져와야 한다면 이곳이 바로 네트워크 요청을 인스턴스화할 수 있는 좋은 장소이다.
아마 대부분 setState()를 componentDidMount()에서 즉시 호출할 것이다. 이때 추가적인 랜더링이 유발되고 이는 브라우저가 스크린을 업데이트 하기 전에 발생한다. 이 경우에는 render()가 두 번 불리게 되지만 사용자는 그 찰나의 순간을 확인할 수 없다. 이런 사용 방식은 성능 문제로 이어지기 쉬워 주의해야한다. 대부분의 경우 앞의 방식을 대신하여 constructor()메서드에서 초기 스테이트를 할당한다. 그러나 모달 또는 툴팁과 같이 랜더링에 앞서 DOM 노드의 크기나 위치를 먼저 측정해야 하는 경우 이런 방식이 필요하다.
Updating
업데이트는 프롭스나 스테이트의 변경에 의해 발생한다. 컴포넌트가 리렌더링될 때 아래와 같은 함수가 다음의 순서로 호출된다.
1. render()
2. componentDidUpdate()
componentDidUpdate(prevProps, prevState, snapshotcomponentDidUpdate()는 업데이트가 일어난 직후에 불려진다. 이 메소드는 첫 랜더링을 위해 존재하는 것은 아니다.
컴포넌트가 업데이트가 되었을 때 DOM에서 조작할 기회로 이 메소드를 쓸 수 있다. 현재 프롭스와 이전 프롭스를 비교하여 네트워크 요청을 하는 작업을 수행할 좋은 장소이기도 하다.
componentDidUpdate(prevProps) {
// Typical usage (don't forget to compare props):
if (this.props.userID !== prevProps.userID) {
this.fetchData(this.props.userID);
}
}componentDidUpdate()에서 setState()를 즉시 부르게 될 것이다. 하지만 반드시 위와 같은 예제처럼 조건에 둘러싸여 있어야 한다. 그렇지 않으면 무한 루프에 빠지게 될 것이다. 이것 또한 당연히 사용자에게는 보이지 않지만 컴포넌트 퍼포먼스에 영향을 미치는 추가적인 리 랜더링이 유발된다.
Unmounting
이 메소드는 컴포넌트가 DOM에서 제거될 때 호출된다.
1. componentWillUnmount()
componentWillUnmount()componentWillUnmount()는 컴포넌트가 언마운트되기 직전에 불려진다. 그리고 이 안에서 예를 들면 타이머 무효화 시키기, 네트워크 요청 취소하기와 같이 componentWillUnmount()에서 생성이 되었던 것들이 cleanup되는 동작을 수행하도록 하자.
여기서 setState()를 호출해서는 안된다. 왜냐하면 컴포넌트는 절대 리랜더링되지 않을 것이기 때문이다. 컴포넌트 인스턴스가 언마운트 되면 이것은 절대 다시 마운트 되지 않는다.
