Merge pull request #61 from cs-yum/munyong

docs: React useTransition 글 발행

docs/React/React Hooks/11. useTransition.md

@@ -0,0 +1,92 @@
+## 🧑🏻‍💻 useTransition
+
+---
+
+> `useTransition` 은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다.
+> 
+
+### ✅ useTransition 문법
+
+```tsx
+const [isPending, startTransition] = useTransition()
+```
+
+- `useTransition`은 매개변수, 반환값이 없다.
+- `isPending` 은 보류 중인 트랜지션이 있는지를 알려준다.
+- `startTransition` 은 state 업데이트를 트랜지션으로 표시할 수 있는 함수이다.
+
+## 🧑🏻‍💻 알고 가기
+
+---
+
+### ✅ useTransition 사용 효과
+
+- 리렌더링 도중에도 UI가 반응성을 유지한다. 예를 들어, 사용자가 탭을 클릭했다가 마음이 바뀌어 다른 탭을 클릭하면 첫 번째 리렌더링이 완료될 때까지 기다릴 필요 없이 다른 탭을 클릭할 수 있다. (논블로킹)
+- 느린 디바이스에서도 사용자 인터페이스 업데이트의 반응성을 유지할 수 있다.
+
+### ✅ `startTransition` 함수 사용법
+
+```tsx
+function TabContainer() {
+  const [isPending, startTransition] = useTransition();
+  const [tab, setTab] = useState('about');
+
+  function selectTab(nextTab) {
+    startTransition(() => {
+      setTab(nextTab);
+    });
+  }
+  // ...
+}
+```
+
+- state가 로딩 중일 때 `startTransition`함수를 사용하면 state 업데이트를 트랜지션으로 표시할 수 있다
+- `startTransition` 함수는 매개 변수로 state를 업데이트하는 함수인 `scope`를 받는다.
+- `scope`는 동기식이어야 하며, React는 매개변수 없이 `scope`를 즉시 호출하고 `scope` 함수 호출 중에 동기적으로 예약된 모든 state 업데이트를 트랜지션으로 표시한다. 이는 논블로킹이고, 로딩을 표시하지 않는다.
+
+- 부모 컴포넌트에서 받아온 prop에 state를 변경하는 로직이 있다면, 해당 prop을 `startTransition` 함수로 감싸도 state 업데이트를 트랜지션으로 표시할 수 있다.
+- 트렌지션 업데이트는 텍스트 입력(input)을 제어하는 데 사용할 수 없다.
+
+### ✅ 언제 사용하는지
+
+- 트랜지션으로 표시된 state업데이트는 다른 state의 업데이트에 의해 중단되기 때문에 state 변경이 일어날 시, 바로 즉시 기존 이벤트에서 다른 이벤트로 넘어갈 수 있다.
+
+```jsx
+import { useTransition } from 'react';
+
+export default function TabButton({ children, isActive, onClick }) {
+  const [isPending, startTransition] = useTransition();
+  if (isActive) {
+    return <b>{children}</b>
+  }
+  if (isPending) {
+    return <b className="pending">{children}</b>;
+  }
+  return (
+    <button onClick={() => {
+      startTransition(() => {
+        onClick();
+      });
+    }}>
+      {children}
+    </button>
+  );
+}
+```
+
+- isPending 상태를 활용해서 로딩을 구현할 수도 있다.
+- Suspense가 도입된 라우터에서 페이지 내비게이션을 트랜지션으로 표시할 때 사용한다.
+
+## 🧑🏻‍💻 활용 및 생각할 거리
+
+---
+
+### ✅ useTransition과 일반 state 업데이트의 차이점
+
+**트랜지션에서 현재 탭 업데이트하기**
+
+state 업데이트는 트랜지션으로 표시되므로 느리게 다시 렌더링해도 사용자 인터페이스가 멈추지 않는다. 사용성을 개선할 수 있다.
+
+**트랜지션 없이 현재 탭 업데이트하기**
+
+속도가 느려진 탭을 렌더링하는 동안 앱이 멈추고 UI가 응답하지 않는 것을 확인할 수 있다. state 업데이트는 트랜지션이 아니므로 느리게 다시 렌더링하면 사용자 인터페이스가 정지된다.