react life-cycle
December 21, 2019
라이프 사이클은 총 세가지 로 나뉜다.
마운트
DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트 라고 한다.
-
constructor: 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드.
-
getDerviedStateFromProps: props에 있는 값을 state에 동기화하는 메서드.
-
render: 준비한 UI를 렌더링하는 메서드.
-
componenetDidMount: 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드.
업데이트
컴포넌트를 업데이트할 때는 네 가지 경우이다.
업데이트 메서드
-
getDerviedStateFromProps: 이 메서드는 마운트 과정에서도 호출하며, props가 바뀌어서 업데이트할 때도 호출한다.
-
shouldComponentUpdate: 컴포넌트가 리렌더링을 해야 할지 말아야 할지를 결정하는 메서드, 여기서 false를 반환하면 아래 메서드들은 호출하지 않는다.
-
render: 컴포넌트를 리렌더링한다.
-
getSnapShotBeforeUpdate: 컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드.
-
componentDidUpdate: 컴포넌트의 업데이트 작업이 끝난 후 호출하는 메서드이다.
언마운트
마운트의 반대 과정이며 컴포넌트 DOM에서 제거하는 것을 언마운트라고 한다.
render() 함수
이 메서드는 컴포넌트 모양새를 정의한다. 컴포넌트에서 가장 중요한 메서드라고 할 수 있으며 라이프사이클 메서드 중 유일한 필수 메서드이다.
이 메서드 안에서 this.props와 this.state에 접근할 수 있으며, 리액트 요소를 반환한다. 이 메서드 안에서는 절대로 state를 변형해서는 안되며, 웹브라우저에 접근해서도 안된다. DOM정보를 가져오거나 변화를 줄 때는 componentDidMount에서 처리해야 한다.
constructor 메서드
이메서드는 컴포넌트의 생성자 메서드로 컴포넌트를 만들 때 처음으로 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.
getDervedStateFromProps 메서드
이것은 리액트v16.3 이후에 새로 만든 라이프사이클 메서드이다. props로 받아 온 값을 state에 동기화시키는 용도로 사용하며, 컴포넌트를 마운트하거나 props를 변경할 때 호출한다.
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.value !== prevState.value) { // 조건에 따라 특정 값 동기화
return { value: nextProps.value };
}
return null; // state를 변경할 필요가 없다면 null을 반환
}