생명주기(LifeCycle)
클래스 컴포넌트가 DOM에 렌더링 된 후 호출되는 다른 메소드들이 있다.
이런 메소드들을 리액트 생명주기(Life Cycle)라고 한다.
생명주기에는 3가지 상태가 있다.
- 컴포넌트가 DOM에 처음 렌더링되는 과정을 마운팅이라고 하며
- props 또는 state가 변경되어 다시 리렌더링
되는것을 업데이트라고 한다. - 컴포넌트가 DOM에서 제거되는 것을 언마운팅이라고 한다.
마운팅
마운팅과 관련된 메소드들은 다음과 같다.
constructor()
JavaScript에서 클래스를 생성할 때 호출되는 메소드이다.
컴포넌트가 마운팅될때 가장 먼저 호출된다.
메소드를 바인딩하거나 state를 초기화하는 작업이 없다면
해당 리액트 컴포넌트에는 생성자를 구현하지 않아도 된다.
리액트 컴포넌트의 생성자는 해당 컴포넌트가 마운트되기 전에 호출된다.
React.component를 상속한 컴포넌트의 생성자를 구현할 때에는
꼭 super(porps)를 호출해야 한다.
생성자 함수를 사용하는 목적은 두가지 있다.
- this.state에 객체를 할당하여 로컬 state를 초기화 하기 위해
- 인스턴스에 이벤트 처리 메소드를 바인딩 하기 위해
constructor()내부에서 setState()를 호출하면 안된다.
컴포넌트에 로컬 state가 필요하다면
생성자 내에서 this.state에 초기 state값을 할당하면 된다.
render()
클래스 컴포넌트에서 반드시 구현돼야하는 유일한 메소드이다.
constructor()가 호출된 후 호출된다.
이 메소드가 호출되면 this.props와 this.state의 값을 활용해
아래의 것중 하나를 반환해야 한다.
- 리액트 엘리먼트
보통 JSX를 사용하여 생성됨
- 배열과 Fragment
여러개의 엘리먼트를 반환할때
- Portal
별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링한다.
- 문자열과 숫자
DOM상에 텍스트 노드로서 렌더링 된다.
- Boolean 또는 null
아무것도 렌더링하지 않는다.
render() 함수는 순수성을 유지해야한다.
즉, 컴포넌트의 state를 변경하지 않고,
호출될때마다 동일한 결과를 반환해야 하며,
브라우저와 직접 상호작용하지 않는다.
브라우저와의 상호작용이 필요하다면
componentDIdMount()나 다른 생명주기 메소드 내에서 수행해야한다.
componentDidMount()
클래스 컴포넌트에서 render()가 호출된 후 바로 호출된다.
주로 렌더링 된 후 브라우저와의 상호 작용을위한
이벤트들을 설정할 때 사용한다.
이 메소드에서 즉시 setState()를 호출하는 경우도 있다.
이 과정에서 추가적인 렌더링이 발생하지만
브라우저가 화면을 갱신하기 전에 이루어진다.
이 경우 render()가 두번 호출되지만 사용자는 그 중간과정을 볼 수 없다.
다만 이 방식은 성능 문제로 이어지기 때문에 사용에 주의가 필요하다.
업데이트
업데이트는 사용자에 의해 Props, state가 변경되면 새로 갱신될 때 발생한다.
class App extends React.component {
state = {
count: 0
}
add = () => {
this.setState(current => ({ count: current.count + 1}))
};
minus = () => {
this.setState(current => ({ count: current.count - 1}))
}
render() {
return (
<div>
<h1>The number is: {this.state.count}</h1>
<button onClick={this.add}>Add</button>
<button onClick={this.minus}>Minus</button>
</div>
);
}
}위 예제에서 add 버튼을 눌러 add함수가 호출되고 state의 값이 변경되면
변경된 state를 갱신하기위해 다시 렌더링 될 것이다.
state를 갱신할때마다 업데이트를 하기 때문에
setState()를 호출할 때마다 발생한다.
이 과정에서 실행되는 메소드들은 다음과 같다.
render()
마운팅될때 호출되는 메소드와 같다.
업데이트 될 때 한번 더 호출되어 갱신한다.
componentDidUpdate()
갱신이 일어난 직후 호출된다.
이 메소드는 최초 렌더링에서는 호출되지 않는다.
render()가 호출된 후 호출하기 때문에
업데이트 된 후 어떠한 이벤트를 생성해야 될 때 사용한다.
컴포넌트가 갱신될 때 DOM을 조작하기 위해 이 메소드를 활용한다.
또한 props를 비교하여 네트워크 요청을 보내는 작업도 이 메소드에서 이루어 진다.
언마운팅
컴포넌트가 DOM 상에서 제거될 때에 호출된다.
componentWillUnmount()
컴포넌트가 마운트 해제되어 제거되기 직전에 호출된다.
이 메소드는 타이머 제거, 네트워크 요청 취소 등
필요한 모든 정리 작업을 수행해야된다.
이 메소드가 호출된 후에는 컴포넌트가 다시 렌더링되지 않으므로
이 메소드 안에서 setState()를 호출하면 안된다.
컴포넌트 인스턴스가 언마운팅되고 나면 절대로 다시 마운팅되지 않는다.
생명주기 다이어그램
위의 내용을 그림으로 표현하면 다음과같이 표현할 수 있다.
위 그림은 이곳에서 자세히 볼 수 있다.
