2023.08.17 [suspanse, useTransition]

오랜만에 TIL!

 

과제 테스트를 진행하면서 suspanse를 도입하였는데 처음으로 사용해본 suspanse는 나에게 의문점을 주었다.

 

suspanse의 경우 로딩 중일 땐 fallback 으로 설정해둔 컴포넌트가 보여지게 되는데 이 때 기존 페이지는 black 된 상태이기 때문에 정말 로딩 컴포넌트만 보여지게 된다. 하지만 나는 기존 페이지를 유지하면서 위에 로딩 스피너를 띄우고 싶었기 때문에 이러한 로직이 난감했다..

 

그 때 구글링하면서 찾은 것이 바로 useTransition!

 

useTransition은 react18에서 동시성을 위해 추가된 훅으로 설정한 state의 값이 변경될 때까지 리렌더링을 유예할 수 있다고 한다! 

그래서 useTransition을 사용함으로써 state가 변경될 때까지 fallback 컴포넌트가 렌더링되는 것을 방지한다.

(로딩 컴포넌트 쓰려고 suspanse 쓰는데 로딩을 막는 아이러니..)

주로 별도의 로딩처리를 하기보다 이전 페이지를 유지하면서 작업해야할 때 편리할 것 같다.

 

근데 나는 별도의 로딩 처리가 필요해서 suspanse를 최상단이 아니라 컴포넌트마다 해야하나 고민했었다. 그런데 모달에 lazy loading을 걸어두고 여기에서 필요한 상태라 위치가 아무리 해도 애매해서... 생각해보니 useTransition에서 isPending을 지원하니까 이 값을 이용해야겠다는 생각이 들었다.

 

각 컴포넌트마다 별도의 로딩 처리를 보여주기 위해 로딩 스피너가 아닌 버튼의 색깔 변경으로 상호작용 중임을 나타내었다.

suspanse를 사용하는 것이 애매해서 빼야하나? 생각했는데 이렇게 해결되어서 다행이다!

이 부분은 블로그 글로 적고싶으니 TIL은 간단하게 기록만!😊