[React] useLayoutEffect, useTransition, useDeferredValue

 

 

 

반응형

 

[React] useLayoutEffect, useTransition, useDeferredValue

 

 

*mount = React 컴포넌트가 생성되어 DOM에 처음 삽입될 때의 과정.

*unmount = 컴포넌트가 DOM에서 제거될 때의 과정

 

 

 

useLayoutEffect

• useLayoutEffect는 useEffect와 매우 유사하게 작동하지만, 실행 시점이 다릅니다.
• useEffect는 모든 DOM 변경 후 비동기적으로 실행되는 반면, useLayoutEffect는 브라우저가 화면을 그리기 전에 동기적으로 실행됩니다.
• 이는 DOM을 읽고 업데이트하는 작업이 화면에 렌더링되기 전에 필요할 때 유용하게 사용됩니다
• render자체가 화면을 바로 다시그리는게 아니라 랜더는 버츄얼돔으로 어떤 부분을 바꿔야할지 계산하는 행동 -> 페인트로 실제 화면이 바뀜 ->
  클린업이팩트 -> 이후에 화면이 바뀌고 useEffect 실행 state변화줌 -> 리랜더 -> 원하는 화면 보여줌
  그래서 화면에 깜빡임이 보이는것.
• 즉 처음 랜더 -> 버츄얼돔에서 계산 -> 브라우저가 화면 페인팅 -> 클린업 이펙트 -> 유즈이펙트 실행 -> useEffect안에서 state 변경 -> 
  state변경으로 다시 랜더 -> 버츄얼돔 계산(바뀐 state 적용해서) -> 브라우저가 화면 페인팅 (바뀐 state 적용해서)
• useLayoutEffect는 실행순서만 다르고 useEffect와 동일하다. 화면을 그리기 전에 실행한다.
• 기본적으로 useState를 사용하고 화면깜빡임이 발생하는경우 사용 추천 --- useEffect보다 실행순서를 앞당긴 경우
• useState에서는 서버통해서 데이터를 불러오거나, 캐쉬통해서 데이터를 불러올때 처음에는 값을 모르다가 이후에 값을 알게되는 경우가 있다. 그렇게 되면 layout이 어색하게 변하는 경우가 있습니다. 그런 부분을 막고싶을 때 사용
• 돔(DOM) 측정이 필요한 경우(예: 요소의 위치 또는 크기 계산)
• DOM의 시각적 업데이트를 조정해야 할 때

// useLayoutEffect 예제

useLayoutEffect(() => {
	setName('이름');
}, [])

 

 

 

그런데 반대로 실행순서를 뒤로 미룰수가 있다. 이러한 경우가 useDeferredValue, useTransition.

 

 

 

useTransition

• 예) 검색창에 특정 단어 검색후 결과가 나중에 뜨는경우에 리스트가 너무 많이 내려오는데, 잘라서 보여줄수없고 한번에 보여줘야하는경우 성능개선이 필요하다.
• 이럴때 useTransition로 바로 업데이트 되어야하는것과 나중에 업데이트해야하는것을 구분지어준다. -> 성능문제 해결가능
• useDeferredValue 보통 useMemo에서 사용된다. 
• useTransition을 사용하지 않을때 중요도 구분지어 성능문제 해결할수있다.
• useDeferredValue로 덜중요한 state를 정해놓는것 (중요도 / 우선순위)
• 그치만 바로 실행되어야하는 부분(input입력)도 느리게 실행시켰다가 어색하게 될 수 있으니 적절하게 사용해야한다.

// useTransition 예제

// 비교적 느리게 수행되어야하는 부분을 느리게 실행할 함수와
// 그동안 로딩을 표시해줄 상태를 배열로 제공한다.
const [loading, startTransition] = useTransition();

const onChange = useCallback((e) => {
	setName(e.target.value);
    startTransition(() => {
    	setResult(e.target.value + '결과 리스트');
    })
}, [])

 

 

 

 

useDeferredValue

• 보통 useMemo에서 사용된다. 
• useTransition을 사용하지 않을때 중요도 구분지어 성능문제 해결할수있다
• useDeferredValue로 덜중요한 state를 정해놓는것

// useDeferredValue의 예제

const [name, setName] = useState(''); // 업데이트 바로
const deferredName = useDeferredValue(name);
const result = useMemo(() => name + '의 결과', [name]);


const result = useMemo(() => name + '의 결과', [name])
이 코드를

const result = useMemo(() => deferredName + '의 결과', [deferredName]); // 업데이트 천천히
이렇게 바꿔준다.
그렇게 되면 result 값은 name값보다 덜 중요하게 되고 업데이트가 늦게되는 새로운 값이 된다.

 

 

 

 

 

 

 

 

참조!

https://www.inflearn.com/course/lecture?courseSlug=web-game-react&unitId=135353&category=questionDetail&tab=curriculum&q=1246212

학습 페이지