useEffect와 useLayoutEffect 테스트 해보자 (스테픈 2km 완료)

useEffect와 useLayoutEffect 테스트 해보자

우선 두가지 효과를 테스트하기위해

코드를 짜봤다

단순하게 버튼을 클릭하면 아래 변수의 값이 바뀌는 테스트인데

위에 버튼은 useEffect를 사용하고

아래버튼은 useLayouteffect를 사용해서 테스트 한다.

간단한 변수 변경에 따른 화면 리 렌더링 테스트인데

눈으로 봐도 깜빡거림이 비교되게 보인다

어제 작성했던 useEffect의 사이클을 보자면

우선 useEffect는 아래 이미지처럼

render -> paint -> useEffect 순으로 실행된다.

paint가 되고 우리 눈에 다 보이는 상태에서 useEffect가 실행된다.

즉, 0으로 paint된 후 useEffect로 다시 업데이트되는 것이다.

차이점을 명확하게 보기 위해 콘솔로 찍으면서 다시 테스트 해보겠다.

콘솔에 찍히는 값을 보면 useEffect는 0이 먼저 찍히고 그다음에 변경된 값이 한번 더 찍히게 된다.

그리고 이러한 변화 과정을 우리 눈으로 볼수가 있다.

레이아웃 이펙트는

어제 포스팅했던 내용처럼

레이아웃이펙트 훅이 먼저 실행되고 그 뒤에 화면에 페인트가 되기 때문에

값의 변화는 한번만 되는것 처럼 보이게 된다.

실제로는 콘솔에 찍힌 내용처럼 0으로 변경되었다가 랜덤하게 값이 변경되고

이 과정이 다 끝난후에 우리눈에 보여지게 된다. 그래서 깜빡임 없이 한번에 값이 변경된 느낌으로 보이게 된다.

어제 포스팅했던 두 훅의 차이점에서 말했듯

레이아웃 이펙트 훅은 동기적으로 처리하기 때문에
내부 로직에 다양한 변수의 값을 수정한다면 해당 로직을 동기적으로 전부 변경후에 화면에 반영된다.

만약 내부 로직이 엄청나게 복잡하고 양이 많아진다면

사용자 입장에서는 화면 변화가 없는 상태가 오래 지속될수도 있다는게 이러한 이야기이다.

아래는 어제 포스팅했던 글이다.

useEffect와 useLayoutEffect 알아보자

• https://steemit.com/hive-101145/@yonggyu01/useeffect-uselayouteffect-2km

---

스테픈 2km완료했다

오늘도 힘들었다.