📚 Reference

• 공식 사이트 1

📜 Chapter

useRef, ref, forwardRef

useEffect

‣

Reconciliation

• Reconciliation
• 리컨실리에이션
• 재조정
• React는 component에서 prop이나 state가 변경될 때, 직전에 렌더링된 요소(element)와 새로 반환된 요소를 비교하여 실제 DOM을 업데이트 할지 말지 결정해야 한다.
• 이때 두 element가 일치하지 않으면 React는 새로운 요소로 DOM을 업데이트 하는데, 이러한 프로세스를 reconciliation이라고 한다.
• Reconciliation은 render phase, commit phase로 나뉘어진다. render phase는 리렌더링에 따른 UI 변경 내역을 virtual dom에 기록하는 단계이며, commit phase는 실제 UI painting으로 이어지는 단계이다.
• Class component에서는 render phase와 commit phase는 일대일 관계를 띄지만, Function component에서는 일대일 관계를 보장하지 않아, render 함수 내부에서 UI 변경과 연관 있는 값을 변경한다면, 예상치 못하게 동작할 수 있다.
• 따라서 다음과 같이 commit phase에 동작하는 useEffect 내부에서 값을 수정해주는 것이 정상적인 처리 방법이다.

const Counter = () => {
  const count = useRef(0);
  let currentCount = count.current;
  useEffect(() => {
    count.current = currentCount;
  });
  currentCount += 1;
  return <div>count:{currentCount}</div>;
};