use hook에 대해

• use hook

  • use hook의 장점
  • use hook은 어떤 것을 할 수 있는가?
    • context에서 값을 참조
    • server to client 스트리밍
  • 이점

• use hook use hook은 Promise, Context의 데이터를 참조하는 React API입니다.

use에 대한 설명을 react에서는 위와 같이 설명합니다.

• use hook의 장점

  • use hook은 기존 hook과 달리 조건문에서도 사용이 가능하다는 장점이 존재합니다.
  • use hook은 서버 내에서 발생하는 비동기 작업을 클라이언트에서 완료한다는 장점이 존재합니다.

• context에서 값을 참조

  • use hook은 context api에서 값을 꺼내오는 것이 가능합니다.
  • 아래와 같이 기존 hook에서는 불가능했던 사용 방법을 가능케합니다.

function Text({who}){
    if(who) {
      const people = use(PeopleContext);
      people.name; // 가능
    }
}

• server to client 스트리밍
  • server component의 등장으로 server에서 data fetching 혹은 DB 조회를 마치고 해당 데이터를 client component에 흘려주는 방식도 함께 등장했습니다.
    • 이 방식은 크게 두가지로 나뉩니다.
      • 모든 비동기를 완료하고 받은 값을 내려줌
      • promise를 내려주고 완료되기 전까지 suspense fallback -> 완료되면, 값으로 replace

이 때, use hook을 사용하면 아직 완료되지 못한 Promise 객체를 client에 흘려주는 것이 가능해집니다.

import { fetchMessage } from './lib.js';
import { Message } from './message.js';

export default function App() {
  const messagePromise = fetchMessage();
  return (
    <Suspense fallback={<p>waiting for message...</p>}> // suspense로 경계를 만들어줘야 작동합니다.
      <Message messagePromise={messagePromise} />
    </Suspense>
  );
}

// message.js
'use client';

import { use } from 'react';

export function Message({ messagePromise }) {
  const messageContent = use(messagePromise);
  return <p>Here is the message: {messageContent}</p>;
}

이렇게 server는 client component에 인자로 promise 객체를 전달하는 것이 가능합니다. promise 객체는 사실 직렬화 가능한 값이 아닙니다. 내려가는 값도 정말 promise 객체는 아닙니다.

server는 promise 객체를 client component에 내려주지만 promise를 promise를 추적할 ID로 직렬화 가능한 형태로 변환해 내려줍니다.

client는 해당 ID와 Suspense의 fallback을 받습니다. client는 fallback을 그리다가 server가 RSC payload로 $RS, $RC를 받게 되면 fallback rendering 대신 실제 값과 component를 렌더링합니다.

$RC와 $RS는 각각 아래의 의미를 지닙니다.

$RC Replace Content fallback을 실제 컨텐츠로 교체 $RS Resume Suspense Suspense 경계 완료 신호

• 이점

react를 streaming해서 보내는 것의 이점은 무엇일까요? 가장 큰 이점이라 생각하는 것은 무엇보다 빠른 응답성입니다.

client는 server가 보내주는 응답이 끝날때까지 대기해야합니다. 만약 server가 5초 이상 걸리는 외부 api에 dependency를 가지는 경우 client는 이를 같이 기다려야 합니다. 여러 요청중 가장 느린 요청까지 함께 기다릴 필요가 있을까요?

1초 미만의 시간만을 필요로 하는 api들도 함께 client에게 도달하지 못하는 문제를 해결한게 이 방식이라고 생각합니다.