이전 글에서 render와 commit단계에 대해서 알아봤다.
이번엔 React의 LifeCycle 메서드를 통해 조금 더 자세히 알아보려 한다.
Component Update
우리가 setState를 호출하게 되면, 이 변경 정보를 queue에 담고, 이후 하나씩 처리될 것이다.
물론, 변경 사항이 반영되는 것 이전 글에서 다루었듯이 동시에 이루어질 것이다.
그 과정을 자세히 알아보자.
getDerivedStateFromProps
컴포넌트의 업데이트 과정에서 가장 먼저 호출되는 메서드는 getDerivedStateFromProps이다.
이 메서드는 부모로부터 전달되는 props의 변화에 따라 내부 state를 업데이트할 수 있도록 해주며,
state가 변경되는 경우에도 역시 호출된다.
즉, props와 state를 매개변수로 받아 새로운 state를 반환한다.
이 메소드는 static으로 정의되어 있다. 즉, 컴포넌트의 인스턴스에는 접근할 수 없다.
(생명주기 메소드 중 유일하게 static으로 선언되어 있다.)
오직, 전달받은 props와 state만을 기반으로 작동한다.
부수 효과 없이 오직 입력 값에 따라 결과를 만들어내는 순수 함수다.
shouldComponentUpdate
React는 state의 변화에 리렌더링을 진행하지만, 경우에 따라 리렌더링을 막기도 한다.
바로 이 shouldComponentUpdate 메서드가 리렌더링을 막는 역할을 하며,
오직 성능 최적화를 위해 존재한다.
업데이트 후 적용될 props와 getDerivedStateFromProps 를 통해 계산된 새로운 state를 인자로 받아서 리렌더링 여부를 반환한다.
이 역시 순수함수다.
render
만약 shouldComponentUpdate 의 결과가 true 라면,
props와 state를 기반으로 UI를 구성하는 React Element를 반환한다.
다른 메서드와 달리 필수로 구현되어야 한다.
실제 DOM 조작은 아님을 명심하자!
getSnapshotBeforeUpdate
render 메서드가 호출되어 React Element가 생성된 후,
실제 DOM 조작을 통해 변경 사항을 반영하기 직전에 호출된다.
주로, 업데이트 전의 DOM 상태를 캡처해,
componentDidUpdate 에서 필요한 경우 사용할 수 있도록 정보를 전달한다.
prevProps 와 prevState 를 인자로 받아서 snapshot이라는 값을 반환한다.
이 값은 아래의 componentDidUpdate 의 세 번째 인자로 전달된다.
이때, DOM의 값을 읽어들이는 작업은 할 수 있지만,
직접적으로 DOM을 조작하거나 상태를 변경하는 등 부수 효과를 발생시키지 않아야 한다.
componentDidUpdate
이전까지의 메서드는 이전 글에서 다뤘던 두 가지 단계 중 render 단계에서 수행되지만 componentDidUpdate 는 commit 단계에서 호출된다.
이 단계에서는 컴포넌트가 최신 상태로 업데이트된 상태이다.
따라서, 부수효과를 처리하기에 가장 좋은 타이밍이다.
즉, DOM 조작, 이벤트 구독/해제, 네트워크 요청 등을 안전하게 수행할 수 있다.
부수 효과를 처리할 최적의 타이밍이다.
즉, DOM 조작, 이벤트 구독, 네트워크 요청들을 처리하면 된다.
심지어, 상태도 변경할 수 있다. (하지만 조건문을 사용해 필요한 경우에만! 아니면 무한 리렌더링!)
다음은 Hooks 의 동작 원리를 더 알아볼 예정이다.
References
모던 리액트 Deep Dive
react-lifecycle-methods-diagram
How Does React State Actually Work? React.js Deep Dive #4
