이 api는 컴포넌트가 우리의 브라우저에서 나타날 때, 사라질 때, 업데이트될 때, 호출되는 api이다. 정말 중요한 역할!
컴포넌트 초기 생성
일단 컴포넌트가 브라우저에 나타나기 전, 후에 호출되는 api들이 있다.
constructor
constructor(props) {
super(props);
}이 부분은 컴포넌트 생성자 함수이다. 컴포넌트가 새로 만들어질때마다 함수가 호출 된다.
componentWillMout
componentWillMount() {
}
이 api는 컴포넌트가 우리의 화면에 나타나기 직전에 호출되는 api인데, 이 api에 대해선 별로 신경쓰지않아도 된다. 원래는 주로 브라우저가 아닌 환경에서 (서버사이드) 도 호출하는 용도로 사용했었는데, 이 api가 더 이상 필요하지 않게 되어 리액트 v16.3에서는 해당 api가 deprecated 되었으니, 아 옛날엔 이러한 api가 사용됐었구나..하고 알아만 두면 된다. v16.3이후부터는 UNSAFE_componentWillMount() 라는 이름으로 사용된다.
기존에 이 api에서 하던 것들은 위에 있는 constructor와 아래에서 다뤄볼 componentDidMount에서 충분히 처리 할 수 있다.
componentDidMount
componentDidMount() {
// 외부 라이브러리 연동: D3, masonry, etc
// 컴포넌트에서 필요한 데이터 요청: Ajax, GraphQL, etc
// DOM 에 관련된 작업: 스크롤 설정, 크기 읽어오기 등
}
이 api는 우리의 컴포넌트가 화면에 나타나게 되었을 때 호출된다. 여기선 주로 D3,masonry처럼 DOM을 사용해야 하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios,fetch등을 통하여, ajax 요청을 하거나, DOM을 사용해야하는 외부 라이브러리 연동을 하거나, 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios,fetch등을 통하여 ajax요청을 하거나, DOM의 속성을 읽거나 직접 변경하는 작업을 진행한다.
컴포넌트 업데이트
컴포넌트의 업데이트는 PROPS의 변화,그리고 state의 변화에 따라 결정된다. 업데이트가 되기 전과 된 후에 어떠한 api가 호출되는지 살펴보자.
componentWillReceiveProps
componentWillReceiveProps(nextProps) {
// this.props 는 아직 바뀌지 않은 상태
}
이 api는 컴포넌트가 새로운 props를 받게 되었을때 호출된다. 이 안에서는 주로, state가 props에 따라 변해야 하는 로직을 작성한다. 새로 받게 될 props는 nextProps로 조회할 수 있으며, 이 때 this.props를 조회하면 업데이트 되기 전의 api이니 참고
이 api 또한 v16.3부터 deprecate된다. v16.3부터는
UNSAFE_componentWillReceiveProps() 라는 이름으로 사용된다. 그리고 이 기능은 상황에 따라 새로운 API getDerivedStateFromProps 로 대체 될 수도 있다.
[NEW] static getDerivedStateFromProps()
이 함수는 V16.3 이후에 만들어진 라이프사이클 API이다. 이 API는 props로 받아 온 값을 state로 동기화 하는 작업을 해줘야 하는 경우에 사용된다.
static getDerivedStateFromProps(nextProps, prevState) {
// 여기서는 setState 를 하는 것이 아니라
// 특정 props 가 바뀔 때 설정하고 설정하고 싶은 state 값을 리턴하는 형태로
// 사용됩니다.
/*
if (nextProps.value !== prevState.value) {
return { value: nextProps.value };
}
return null; // null 을 리턴하면 따로 업데이트 할 것은 없다라는 의미
*/
}shouldComponentUpdate
shouldComponentUpdate(nextProps, nextState) {
// return false 하면 업데이트를 안함
// return this.props.checked !== nextProps.checked
return true;
}이 api는 컴포넌트를 최적화 하는 작업에서 매우 유용하게 사용된다. 저번에, 리액트에서는 변화가 발생하는 부분만 업데이트를 해줘서 성능이 꽤 잘 나온다고 했었는데 변화가 발생한 부분만 감지해내기 위해서는 virtual DOM에 한번 그려줘야 한다.
즉, 현재 컴포넌트의 상태가 업데이트되지않아도 , 부모 컴포넌트가 리렌더링되면, 자식 컴포넌트들도 렌더링 된다. 여기서 "렌더링"된다는 건 render()함수가 호출된다는 의미이다.
변화가 없으면 물론 DOM 조작은 하지 않게 된다. 그저 Virutal DOM에만 렌더링 할 뿐. 이 작업은 그렇게 부하가 많은 작업은 아니지만, 컴포넌트가 무수히 많이 렌더링 된다면 이야기가 조금 달라진다. CPU 자원을 어느정도 사용하고 있는 것은 사실이니까말이다.
쓸데없이 낭비되고 있는 이 CPU 처리량을 줄여주기 위해서 우리는 Virtual DOM 에 리렌더링 하는 것도, 불필요할 경우엔 방지하기 위해서 shouldComponentUpdate 를 작성한다..
(이어서 계속)
