리액트 라이프사이클 D5

componentDidUpdate()

componentDidUpdate(prevProps, prevState, snapshot) {
  // codes..
}

1. 리액트 라이프사이클의 3단계중 하나인 Updating단계에서 실행되는 메서드
2. snapshot은 getSnapshotBeforeUpdate() 메서드에서 반환된 값을 사용한다.
   getSnapshotBeforeUpdate() 메서드가 반환하는 값이 없다면 snapshot은 undefined.
3. 업데이트 단계부터 사용 가능하다는 것을 명심해야한다!
4. getSnapshotBeforeUpdate() 메서드와 연관되어 작동할 수 있다는 것도 기억하자.

getSnapshotBeforeUpdate()

getSnapshotBeforeUpdate() {
  // codes..
}

getSnapshotBeforeUpdate() 라이프사이클 메서드는 return문을 통하여 snapshot을 생성한다.
그리고 생성된 snapshot은 componentDidUpdate()의 3번째 인자로 전달된다.
예를 들어,

getSnapshotBeforeUpdate() {
  return 100;
}

componentDidUpdate(prevProps, prevState, snapshot) {
  console.log(snapshot);
}

getSnapshotBeforeUpdate()에서 100이 리턴되었으므로 100이 snapshot되었고
console에 snapshot의 값으로 100이 찍히게 된다.

조사해본 바로는 사용할 수 있는 예시로 리렌더링을 통해 DOM이 업데이트되기 전에 특정 태그의 position을 snapshot찍은 후에 업데이트되었을 때 componentDidUpdate()를 통해 업데이트 이후 바뀐 태그의 position 정보를 가져다 쓰는데 쓸 수 있다고 한다.