useSyncExternalStore?

💡 학습 공유 스터디에서 발표를 위해 정리한 글입니다.
🤐 빠른 작성을 위해 음슴체로 작성되어 있습니다.
☠️ 학습 중에 작성한 글이므로 내용에 오류가 있을 수 있습니다!
🥰 오류를 발견하신다면 댓글로 알려주시면 감사하겠습니다!

✔️ useSyncExternalStore 왜 나옴?

1. React 18의 혁신, Concurrency

React 팀은 React 18을 발표하면서, 이번 릴리즈는 동시성(Concurrency) 의 도입으로 렌더링 엔진 개선(자동배칭)과 사용자 경험 향상(transition, suspense)에 집중했다고 함.

 

동시성이 먼디?

이름 그대로 순서에 상관없이 동시에 수행 될 수 있는 성질. 프로그래밍 적인 개념으로 말하면 프로그램을 독립적으로 실행될 수 있는 여러 조각으로 나누어 구조화하는 방식이라고 할 수 있음. 여러가지 작업의 우선순위를 설정해서 마치 동시에 실행되는 것처럼 보이게 만드는 개념이라고도 생각할 수 있음.

React 18 이전의 렌더링은 개입 할 수 없는 하나의 동기적인 처리였다. 렌더링이 시작되면 중단할 수 없었음. 그런데 React 18에서는 동시성 렌더링을 통해 렌더링 프로세스에 개입하여 이를 중단하거나 재개, 또는 취소 할 수 있게 됨.

그래서 무거운 렌더링 작업을 하는 동안 다른 렌더링이 블로킹 되는 현상을 개선하여 보다 나은 사용자 경험을 향상 시킬 수 있게 되는 것.

 

예시 : startTransition

React 18에서는 업데이트를 다음과 같이 구분하여 생각 함.

• 긴급한 업데이트 (urgent updates) : 입력, 클릭, 누르기 같은 다이렉트 상호작용을 반영
• 전환 업데이트 (transition updates) : UI의 전환

타이핑, 클릭, 누르기 같은 긴급 업데이트는 빠르게 업데이트 되지 않으면 버벅거리면서 앱이 이상하다는 느낌을 줄 수 있다. 하지만 화면은 곧바로 결과값을 볼거라고 기대하지 않기 때문에 전환 업데이트는 느리게 업데이트가 되어도 괜찮다.

import { startTransition } from 'react';

// 긴급한 업데이트 : 입력하고 있는 값
setInputValue(input);

// startTransition으로 래핑된 업데이트는 긴급하지 않은 것으로 처리되고, 더 긴급한 업데이트가 들어오면 중단된다.
startTransition(() => {
  // 전환 업데이트: 입력값에 따른 쿼리값
  setSearchQuery(input);
});

위와 같이 startTransition 으로 랩핑된 업데이트는 전환 업데이트로 처리되어 긴급한 업데이트가 들어오면 중단됨.

 

startTransition을 사용하여 블로킹 렌더링 문제를 해결하는 예시

 

2. 혁신과 함께 떠오른 문제?!

React System 내에서는 훌륭함. 하지만 외부 스토어(external store) 를 사용하거나 의존하는 라이브러리의 경우 tearing 이라는 문제가 발생한다.

외부 스토어 vs 내부 스토어

• Internal store(states) : React 에서 제공하는 상태 관리 도구 또는 스토어, useState, useReducer, context, props 등
• External store
  • React에서 제공하는 상태관리 api 외의 자체적으로 상태 관리 툴을 만들어 리액트 훅과 연동시킨 상태관리 라이브러리(mobx, redux, recoil, zustand 등)
  • Dom 객체, Web API(Date) 등
  • ref 로 관리하는 변수 값

비동시 렌더링 vs 동시 렌더링 - What is tearing?

1. React 의 렌더링 작업이 시작됨. external store 에 접근해서 색상 값을 가져와서 렌더링함.
2. 렌더링을 계속 진행함 여전히 external store 는 동일한 값을 가짐.
3. 모든 컴포넌트가 파란색으로 렌더링 되고 모두 일관성 있게 잘 보임.
4. 렌더링 후에 external store 는 업데이트가 될 수 있음. React 에서 렌더링이 다 끝난 다음 다른 작업이 일어나도록 허용하기 때문에 React 가 렌더링 되지 않을 때 스토어가 업데이트 되면 다음에 React 가 트리를 렌더링 할 때 첫번째 과정부터 다시 시작해서 모든 컴포넌트가 동일한 값을 가지게 됨

동시 렌더링에서는 React 가 작업이 완료되기 전에 작업을 중단하고 급한 작업에 양보 할 수 있음. 따라서 사용자는 블로킹 없이 페이지와 상호작용 가능함.

그렇다면 만약에 두번째 단계에서 사용자가 스토어를 파란색에서 빨간색으로 변경시키는 버튼을 누른다면?

처음 렌더링 되는 컴포넌트는 파란색 값을 가져오지만, 중간부터는 사용자의 빠른 상호작용을 반영하기 위해 우선적으로 처리되어 변경된 빨간색이 표시되게 되고 이는 시각적인 불일치를 보게 됨. 이런 현상이 Tearing(계층화).

 

Tearing Example - reference 

 

이러한 Tearing 을 해결하고 안전하게 외부 저장소의 값을 일관성 있게 사용하기 위해 나온 것이 바로 useSyncExternalStore 인 것!!!

 

✔️ useSyncExternalStore 간단 사용법

useSyncExternalStore 는 Tearing 문제 없이 외부 저장소를 구독할 수 있는 React Hook.

2개의 필수 매개변수와 1개의 옵셔널한 매개변수를 받고 getSnapshot 의 결과물인 snapshot(상태값) 을 반환한다.

매개변수

1. subscribe : 하나의 callback 인자(onStoreChange)를 받아와 스토어에 구독하는 함수. 스토어가 변경되면 제공된 콜백을 호출. 이로 인해 컴포넌트가 다시 렌더링된다. 구독을 정리하는 함수(clean up)를 반환해야 한다.
2. getSnapshot : 컴포넌트에 필요한 저장소의 데이터 스냅샷을 반환하는 함수. 저장소가 변경되지 않는 동안 getSnapshot 에 대한 반복 호출은 동일한 값을 반환해야 한다. 저장소가 변경되고 반환된 값이 다른 경우(Object.is) 컴포넌트를 다시 렌더링한다.
3. getServerSnapshot : 저장소에 있는 데이터의 초기 스냅샷을 반환하는 함수. 서버 렌더링 시 클라이언트에서 서버 렌더링 콘텐츠의 hydration 작업 도중에 사용됨. 서버 스냅샷은 클라이언트와 서버 간에 동일해야 하며 일반적으로 직렬화(serialized) 되어 서버에서 클라이언트로 전달됨. 이 함수가 제공되지 않으면 서버에서 렌더링 시 에러가 발생함. ⇒ SSR을 위한 기능

예시 : TodoList Store

 

✔️ 근데 나는 동시성 기능을 활용 안하는데?

또한 앞으로의 React 가 나아가는 방향의 큰 축이 동시성 렌더링인 만큼 언제 어디서 어떻게 동시성 기능을 추가 하게 될지 모르고, 그렇기에 내가 작성한 코드가 언제 문제가 될지 예측할 수 없음.

따라서 Jotai, Zustand 의 개발자 카토 다이시는 코드 내에서 외부 저장소와 내부 저장소를 명확히 구분하여 외부 저장소의 데이터를 참조하는 코드는 useSyncExternalStore 를 적극 활용하는걸 권장함.

(특히나 라이브러리 개발자 입장에서는 더더욱 사용자가 동시성 지원 여부를 선택할 수 있는 만큼 거의 필수.)

 

또 영영 동시성을 적용하지 않는다고 하더라도 주관적인 생각으로 useSyncExternalStore 훅은 배경을 치우고 기능 자체만 두고 본다면 React 에서 일단 특정 데이터에 구독을 걸어두고 리렌더링을 트리거 할 수 있는 훅인거임. 그러면 개발자 입장에서 좀 더 자유롭게 특정 시점에 레린더링을 트리거 할 수 있는 새로운 방법인게 아닐까?

또한 해당 훅을 사용하면 Context API 등으로 복잡한 상태값을 통채로 참조해서 발생하는 불필요한 리렌더링 문제도 스냅샷 함수로 특정 값만 참조하도록 구현하면 불필요한 리렌더링도 줄일 수 있을 것 같음. → 현재 cos-ui form 에 적용 시도 중

그러한 로직을 또 이전엔 useState와 useEffect 를 써서 다소 복잡하게 구현을 해야 했는데 이젠 subscribe 함수만 잘 구현해놓으면 useSyncExternalStore 하나로 해결이 가능함. 그럼 코드가 좀 더 가독성이 좋아지는게 아닐까?

 

✔️ 그래서 찾아본 useSyncExternalStore 를 활용한 또다른 예시

• useSyncExternalStore - 과소평가 된 React API
• Zustand 처럼 Global State Management 관리 기능 구현

 

✔️ 참고한 자료

 ⭐️ React Docs : useSyncExternalStore : React Docs useSyncExternalStore 공식문서

 ⭐️ React Conf 2021 : React 18 for External Store Libraries : Zustand 개발자 카토 다이시 발표 영상 ⭐️

Zustand 동작 원리와 ExternalStore

https://velog.io/@jay/useSyncExternalStore

React 18의 useSyncExternalStore, Tearing 현상은 무엇인가?

쉽게 떠먹여주는 React 18 업데이트