리액트에서 성능 개선하면 메모이제이션이 가장 먼저 떠오를 것이다.최근 애플리케이션의 성능을 개선하길 원하며 수많은 함수들이 useCallback으로 래핑되어 있다.하지만 모든 함수를 useCallback으로 감싼다고 해서 애플리케이션의 성능이 좋아지는 것일까? 메모이제이션이 왜 필요할까?이는 자바스크립트에서의 값 비교와 관련이 있다. string이나 boolean같은 원시 값들은 비교가 매우 직관적이다.const a = 1;const b = 1;a === b // true 보이는 값이 바로 그 값이다. 즉, 위의 예제에서 a와 b를 비교했을 때, 보이는 것과 같이 두 변수의 실제 값은 동일하다. 하지만 object와 array, function과 같은 참조 값들은 다르다.어떤 변수에 객체를 할당했을 때 ..
useEffect는 페인트 후에 실행된다는 보장이 없다. useLayoutEffect에서 상태를 업데이트하면 동일한 렌더링의 모든 useEffect가 페인트 전에 실행되므로 레이아웃 이펙트로 전환된다. 💡 일반적인 리액트의 업데이트 진행 1. 리액트 작업: 가상 DOM 렌더, 이펙트 스케줄링, 실제 DOM 업데이트 2. `useLayoutEffect` 호출 3. 리액트 제어 해제, 브라우저의 DOM 페인트 4. useEffect 호출 일반적으로 useEffect는 레이아웃과 페인트 이후, 지연된 이벤트 중에 발생한다. useEffect는 새로운 렌더링이 시작되기 전에 실행되도록 보장된다. 때때로 useEffect가 페인트 전에 실행될 수도 있다. a) 새 업데이트(리렌더)가 시작되기 전에 useEffec..
