[⚛️ React conf 2024] 두 대의 컴퓨터로 돌아가는 리액트 (React for Two Computers

2024.09.24 - [👩🏻‍💻 dev] - [⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 | Lydia Hallie)

[⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 | Lydia Hallie)

What's new in React 19 | Lydia Hallie약 2 달 전에 REACT CONF 2024가 열렸다.여러 토크들이 진행되었었는데, 그중 따끈 따근(?)한 React 19의 새 소식들을 살펴보고자 한다.canary 버전의 리액트를 쓰고 있었다면

pyotato-dev.tistory.com

이전 글은 리액트 19에서 새로워진 기능들이나 개선된 사항에 대해 살펴봤었다.
오늘은 Dan Abramov가 발표한 "React for Two Computers"에 대해 정리해보고자 한다.

토크 시작 부분에서 Dan은 해당 주제에 대한 토크를 글로 포스팅하기 위해 여러 차례 시도해 봤지만,
"토크" 이기 때문에 전달할 수 있는 것들이 있는 부분들이 "글"로써는 전달하기 어려운 점에 대해 이야기했다.

뜬금없이 왜 토크와 포스트에 대해 설명하나 싶겠지만,
오늘 주제는 토크(현재, 클라이언트)와 포스트(과거, 서버)와 밀접한 비유이므로 그 특성을 고려하고 토크를 들으면 이해하기 더 쉬운 거 같다.

토크는 퍼포먼스이자 스토리라고 한다.
공연처럼 실시간으로 말을 하고 행동을 보여주기도 한다는 점에서 퍼포먼스고,

토크를 하기 위해 전달할 내용이 있다는 점에서 스토리이다.

현재의 토크를 하고 있는 Dan과 과거의 발표준비를 하고 있는 Dan, 이 두 주체 간의 콜라보라고 생각할 수 있다.

시공간적으로 이 두 Dan은 공존할 수 없지만 과거와 현재의 Dan 간에는 어떠한 커뮤니케이션이 있다.

"토크"라는 것을 완성하기 위해서는 과거의 Dan이 발표 주제에 대한 자료(스크립트)를 준비해야 하고,

현재의 Dan은 해당 자료를 가지고 발표를 전달해야 한다.

마찬가지로 뮤지컬 공연을 한다고 하면, 공연을 하기 위한 대본이 존재해야 하고, 공연을 하는 배우들은 해당 대본을 연기해야 뮤지컬이 완성된다. 대본만 썼다고 뮤지컬 공연이라고 할 수 없고, 뮤지컬 배우가 대본 없는 연기를 보여준다고 뮤지컬 공연이라고 보기 어렵다.

이 커뮤니케이션은 "컴퓨터 세계"에서도 유사하게 존재하는데, 오늘의 주제가 이 서버와 클라이언트의 관계 대한 것이다.

서버와 클라이언트를 논하는 여러 가지 방면이 있겠지만, Dan은 그중 "전통적인 콘텍스트에서의 두 머신 (컴퓨터 프로그램)"에 대해 다룬다. 즉, "전통적인 웹개발에서의 request/response 모델"의 콘텍스트에서 클라이언트가 서버에게 어떤 페이지를 요청하고, 서버가 html/스크립트 등의 응답을 한다.

이 관계에 대해서 더 살펴보기 위해 다음과 같은 스크립트가 있다고 하자. 아래의 코드는 랜덤으로 고양이 이름을 골라주는 짧은 프로그램이다.

const catNames = ['Alonzo', 'Bill Bailey', 'Bombalurina', 'Electra', 'Plato'];
function onClick(){
	const response = await fetch('/api/cat-names');
    const json = await response.json();
    const {catNames} = json;
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    document.body.innerText = catName;
}

하지만 고양이 이름 (catNames)처럼 하드코딩된 자료를 사용하는 것보다 좀 더 유연하게 데이터베이스에서 가져오거나 파일 시스템에서 읽거나 챗지피티에게 물어보고 싶을 수도 있다.

전통적인 방식을 따라서 다음과 같이 api에 요청을 할 수 있다.

// client.ts
async function onClick(){
	const response = await fetch('/api/cat-names');
    const json = await response.json();
    const {catNames} = json;
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    document.body.innerText = catName;

}

하지만 이렇게 코드를 변경하면 api 응답을 받아오기까지의 시간차 때문에 즉각적으로 화면에 이름이 보이지 않는다.

throttle 설정으로 인터넷이 느린 환경을 모방한다면 다음과 같다.

유저 인터페이스가 랜더 된 시점에는 고양이 이름에 대한 데이터가 없기 때문에 api를 호출해서 해당 데이터가 내려질 때까지 기다려야 한다.

만약에 인터넷이 아예 연결되지 않은 상태라면 데이터가 보이지 않을 수 있다.

대부분의 상황에서는 이런 동작 방식이 문제 되지 않는다.

링크를 클릭하거나, 폼을 제출하는 동작은 당연히 서버를 통해 어떤 데이터가 필요한 게 당연하기 때문에,

딜레이가 발생할 수 있다는 게 짐작 가능하다.

하지만 어떤 경우에는 동작들이 동기적(latency 최소화)으로 이루어졌으면 좋겠다고 생각할 수 있다.

예를 들어, 페이지에 데이터가 없는 상태가 아닌 페이지가 보이는 동시에 페이지의 데이터가 함께 보이기를 원할 수 있다.

어떻게 하면 페이지를 로드하는 동시에 데이터를 함께 보여줄 수 있을까?

클라이언트의 입장에서 살펴보면, 어쨌든 api 요청을 하면 해당 데이터가 도착할 때까지 기다려야 한다는 점에서 할 수 있는 게 없어 보인다.

그럼 서버 코드에서 손 볼 수 있는 게 있을까?

다음은 api/cat-names의 서버 코드다.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
        <script src="client.ts"></script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

한 가지 집중해서 볼 부분은 <script src="client.ts"></script>이다.

이 부분은 위에서 작성했던 클라이언트 코드를 불러온다.

서버 코드는 사실 다음과 같은 것이다.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            async function onClick(){
                const response = await fetch('/api/cat-names');
                const json = await response.json();
                const {catNames} = json;
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

이 전까지는 서버 코드와 클라이언트 코드를 서로 커뮤니케이션(요청/응답 주고받기)하는 별개의 두 개의 프로그램으로 보았다면,

지금의 코드로 봤을 때는 하나의 프로그램이 두 개의 컴퓨터, 두 개의 단계로 동작한다는 관점으로 살펴볼 수 있다.

이 관점으로 생각을 해보면 위의 코드를 개선할 수 있는 방식을 떠올릴 수 있다.

먼저 클릭 이벤트 핸들러를 동기적으로 만들기 위해 aysnc를 제거해 보자.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            // ✨ 변경
            function onClick(){
                const response = await fetch('/api/cat-names');
                const json = await response.json();
                const {catNames} = json;
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

하지만 api 호출 코드는 await이므로 async와 짝을 이루어야 하기 때문에 해당 부분에 대한 처리가 필요하다.

리액트에는 'lifting state up'라는 것이 있다. 이는 부모 컴포넌트에서 state를 선언하고 자식(하위) 컴포넌트에게 전달하는 방식인데,

데이터도 마찬가지로 끌어올릴(lift up) 수 없을까? state를 부모 컴포넌트로 끌어올 리 듯이, 데이터를 부모 컴퓨터인 서버로 끌어올릴 수 있지 않을까?

다음과 같이 fetch 하는 코드 부분을 서버로 끌어올려보자.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    // ✨ 변경
    const response = await fetch('/api/cat-names');
    const json = await response.json();
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            function onClick(){
                const {catNames} = json;
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

추가로 이제 fetch가 서버에서 동작하기 때문에 호스트를 명시해 주자.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    // ✨ 변경
    const response = await fetch('http://localhost:3000/api/cat-names');
    const json = await response.json();
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            function onClick(){
                const {catNames} = json;
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

하지만 실행을 하면 다음과 같이 json에 대한 reference 에러가 발생한다.

일반적인 중첩함수였다면 클로저 덕분에 에러가 발생하지 않았을 것이다.

하지만 현재 코드는 네트워크 상에서의 클로저를 적용하려는 것이기 때문에 동작하지 않는다.

json의 목적은 네트워크 상에서 데이터를 전송하기 위한 것이다.

지금까지 살펴본 프로그램은 프로그램을 string으로 전송한다.

이 기능을 하기 위해서 다음과 같이 프로그램과 같이 데이터를 전송하기 위해 json을 string으로 변경해 줄 수 있다.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/api/cat-names') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = { catNames };
    return json;
  }
  if (url === '/') {
    const response = await fetch('http://localhost:3000/api/cat-names');
    const json = await response.json();
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            function onClick(){
                // ✨ 변경
                const {catNames} = ${JSON.stringify(json)};
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

코드를 수정하고 나서 다시 버튼을 클릭했을 때 네트워크 요청이 발생하지 않는다는 걸 볼 수 있다.

이는 데이터가 페이지를 불러올 때 이미 같이 왔기 때문이다.

코드를 살펴보니 고양이 이름을 파일에서 읽어온다는 역할 하나뿐이므로 api가 굳이 필요 없는 것 같다.

다음과 같이 해당 부분을 바꿔보자.

import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const json = await response.json();
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            function onClick(){
                // ✨ 변경
                const {catNames} = ${JSON.stringify(json)};
                const index = Math.floor(Math.random() * catNames.length);
                const catName = catNames[index];
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

response와 코드를 다시 살펴보면 데이터 흐름에 대해서 파악할 수 있다.

response로 받은 catNames는 매우 긴데, 실제로 우리가 필요한 고양이 이름은 하나뿐이다.

코드에서 살펴보면 파일을 읽어와서 고양이 이름들을 배열에 담아, 해당 이름들 중 랜덤으로 하나를 텍스트로 보여준다.

전체 리스트를 가져와 클라이언트에서 랜덤 하게 하나를 선택할 필요 없이, 다음과 같이 서버에서 바로 하나만 골라서 보내주면 된다.

import {readFile} from 'fs/promises';
import { readFile } from 'fs/promises';

async function server(url) {
  if (url === '/') {
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    // ✨ 변경
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    const json = {catName};
    return `<!doctype html>
    <html>
      <head>
        <link rel="stylesheet" href="/style.css" />
      </head>
      <body>
      	<script>
            function onClick(){
                // ✨ 변경
                const {catNames} = ${JSON.stringify(json)};
                document.body.innerText = catName;
            }
        </script>
        <button onClick="onClick()">Reveal</button>
      </body>
    </html>
    `;
  }
}

이제는 응답으로 받은 데이터가 우리가 필요로 했던 랜덤 한 고양이 이름 하나뿐이다.

1. 하나의 컴퓨터에서는 다음과 같은 결과물을 만들어내고,

import {readFile} from 'fs/promises';
const catFile = await readFile('./cats.txt', 'utf8');
const catNames = catFile.split('\n');
const index = Math.floor(Math.random() * catNames.length);
const catName = catNames[index];
const json = {catName};
return `<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <script>
        function onClick(){
            // ✨ 변경
            const {catNames} = ${JSON.stringify(json)};
            document.body.innerText = catName;
        }
    </script>
    <button onClick="onClick()">Reveal</button>
  </body>
</html>
`;

2. 이후 또 다른 컴퓨터에서는 다음과 같은 코드를 실행하도록 보내지게 된다.

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <script>
        function onClick(){
            const {catNames} = ${JSON.stringify(json)};
            document.body.innerText = catName;
        }
    </script>
    <button onClick="onClick()">Reveal</button>
  </body>
</html>

1과 2는 서로 다른 세계에서 실행되고, 이 과정은 접근법과 라이브러리에 상관없이 동일한 형태이다.

하지만 위의 코드처럼 코드를 작성해야 한다면 syntax highlight도 지원되지 않고, 모듈이나 타입 체크의 혜택도 누리지 못한다.

지금은 단순한 코드지만 해당 코드에 기능하나 feature 하나 추가하려면 기하급수적으로 복잡해질 거라는 꺼림칙한 느낌도 든다.

위의 코드 덩어리를 split 할 수 없을까?

각각의 함수로 분리하고 각 함수에 feature에 맞는 이름을 붙여주고 사용할 수 있다면 해당 코드는 훨씬 간결해질 거 같다.

리액트를 써본 적이 있다면 component를 쉽게 떠올릴 수 있을 것이다. 해당 코드를 컴포넌트의 측면에서 다시 짜보자.

먼저 고양이 이름을 생성할 컴포넌트는 다음의 정보가 필요할 것이다.

import {readFile} from 'fs/promises';
export default async function CatNameGenerator(){
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    // ...
}

일단 1에서 뽑아왔던 코드를 제외하고 필요할 거 같은 부분들을 살펴보자.

페이지를 로드할 때 이미 데이터를 가져왔기 때문에 다음과 같이 catName을 onClick밖으로 빼낼 수 있다.

// ...중략...
<script>
    // ✨ 변경
    const {catNames} = ${JSON.stringify(json)};
    function onClick(){
        document.body.innerText = catName;
    }
</script>
<button onClick="onClick()">Reveal</button>
// ...중략...

여기서 {catNames}가 리액트에서 익숙한 형태인 props를 넘겨받는 컴포넌트와 비슷해 보일 수 있다.

import {readFile} from 'fs/promises';
export default async function CatNameGenerator(){
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    // ...
}

// ✨ 추가
function RevealButton({catName}){
    function onClick(){
        document.body.innerText = catName;
    }
    return (
    	<button onClick={onClick()}>
        	Reveal
        </button>
    );
}

⚠️ html이 아닌 jsx이므로 onClick()를 중괄호로 감싸줘야 한다.

이제 이 데이터를 보여줄 컴포넌트 RevealButton을 리턴하면 컴포넌트로 옮기는 작업은 끝난 거 같다.

import {readFile} from 'fs/promises';
export default async function CatNameGenerator(){
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    // ✨ 추가
    return <RevealButton catName={catName}/>;
}

function RevealButton({catName}){
    function onClick(){
        document.body.innerText = catName;
    }
    return (
    	<button onClick={onClick()}>
        	Reveal
        </button>
    );
}

'모두 빠짐없이 옮겨놨나'싶지만 한 가지 걸리는 부분이 있다. 이 부분을 무시할 수 있나?

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
 // ...중략...
  </body>
</html>

토크 준비를 하고 있는 Dan과 현재 발표를 하고 있는 Dan이 같은 시공간에 존재할 수 없듯이,

위에서 작성했던 컴포넌트 코드는 하나로 존재할 수 없다. 서로 다른 환경에서 실행되고, 서로 다른 시간에 작동하는 프로그램이다.

즉, 아래의 코드가 작동하고 있는 세계와

import {readFile} from 'fs/promises';

export default async function CatNameGenerator(){
    const catFile = await readFile('./cats.txt', 'utf8');
    const catNames = catFile.split('\n');
    const index = Math.floor(Math.random() * catNames.length);
    const catName = catNames[index];
    return <RevealButton catName={catName}/>;
}

아래의 코드가 작동하고 있는 세계는 서로 물리적으로 분리되어 있다.

function RevealButton({catName}){
    function onClick(){
        document.body.innerText = catName;
    }
    return (
    	<button onClick={onClick()}>
        	Reveal
        </button>
    );
}

왼쪽 코드는 서버에서 돌아가는 코드이고, 서버에서 import 되는 것들은 서버에 존재하는 것들이고,

오른쪽의 코드는 브라우저에서 돌아가는 코드이므로, 브라우저에서 import 되는 것들은 브라우저에 존재한다.

이 둘 사이에 정보는 어떻게 주고받게 되는 걸까?

이전의 코드를 살펴보면 html에 해당하는 부분이 string으로 전달될 때, JSON.stringify로 함께 보내진다.

`<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="/style.css" />
  </head>
  <body>
    <script>
        function onClick(){
            const {catNames} = ${JSON.stringify(json)};
            document.body.innerText = catName;
        }
    </script>
    <button onClick="onClick()">Reveal</button>
  </body>
</html>
`

그럼 서로 다른 두 세계(프로그램)가 있고, 이 두 세계 간에 한쪽 방향으로 데이터를 주고받을 수 있는 문(door)이 있다면 어떨까?

과거로부터 미래에 무언가를 보낼 수 있다면? 그리고 그 무언가가 serialize 가능한 text나 json이라면?

그 문을 하나 달아보자.

// ✨ 추가
'use client';

function RevealButton({catName}){
    function onClick(){
        document.body.innerText = catName;
    }
    return (
    	<button onClick={onClick()}>
        	Reveal
        </button>
    );
}

Dan은 next로 해당 코드를 작성했지만, 리액트 서버 컴포넌트를 지원한다면 어떤 프레임워크에서도 돌아간다.

같은 동작을 하는지 확인을 하자면, rsc payload에 함께 온 데이터를 살 펴면 랜덤 한 고양이 이름 하나가 페이지와 함께 내려진다는 걸 알 수 있다.

정리하자면, 우리는 종종 서버와 컴포넌트가 별개의 프로그램으로 인식한다.

웹페이지 UI를 랜더 할 때도 두 개의 컴퓨터가 존재한다고 볼 수 있다.

왼쪽 바닐라 js의 경우 return문 이전까지 서버에서 실행되고, 클라이언트에서 실행될 프로그램을 return 한다.

그리고 JSON.stringify로 서버에서 클라이언트로 정보를 보내줄 문이 존재한다는 걸 알 수 있다.

오른쪽 리액트 버전의 경우 서버 컴포넌트인 CatNameGenerator에서 데이터를 준비하고,

'use client' 키워드를 통해 서버에서 클라이언트로 데이터를 전달받을 문을 뚫어줄 수 있다는 걸 볼 수 있다.

해당 지시어로 이 모듈은 부모 컴포넌트뿐만 아니라 서버로부터 프롭스를 받을 수 있다는 것을 명시하는 것이다.

🍀 마치면서

"use client"가 어떤 역할을 하는지 간결하고 쉽게 예시를 통해 보여주는 토크였던 거 같다.
그리고 바닐라 js로 서버와 클라이언트 컴포넌트가 어떻게 생겼을지를 보여줘서 'use client'의 역할이 더 와닿았다.
영문으로 된 토크지만 어려운 내용이 아니므로 꼭 원본 토크를 보러 가면 좋을 거 같다.

포스팅을 막 시작하던 시점에서 제목인 React for Two Computers를 어떻게 번역하면 좋을지 고민이 되었다.
직역하면 '리액트를 위한 두 개의 컴퓨터'인데 컴퓨터가 무엇을 위해 두 대 인지 유추하기 어려워, 토크의 내용을 잘 담은 제목은 아닌 것 같았다.
그래서 '두 대의 컴퓨터로 돌아가는 리액트'라고 의역을 했는데, 리액트 컴포넌트는 서버의 코드가 동작하고 있는 하나의 컴퓨터 (리액트 서버 컴포넌트)와, 클라이언트의 코드가 동작하고 있는 또 하나의 컴퓨터(클라이언트 컴포넌트)로 돌아가야 애플리케이션을 보여주는 프로세스가 완성되기 때문이다.

재미있는 토크들이 있는 react conf 2024의 다른 내용들도 차차 다뤄보고자 한다.

📚 References

https://www.youtube.com/watch?v=ozI4V_29fj4

'👩🏻‍💻 dev' 카테고리의 다른 글

polling mechanism으로 react ref 확인하기 (0)	2025.01.22
puppeteer aws lambda에 배포하기 (0)	2024.11.02
[TOSS] useFunnel 만들어보기 (1)	2024.09.24
[⚛️ React Conf 2024] 리액트 19에서 새로워진 것들 (What's new in React 19 \| Lydia Hallie) (1)	2024.09.24
[⚛️ react] synthetic event (ft. +17 비포&애프터) (0)	2024.08.16

🥕 pyotato's dev farm

[⚛️ React conf 2024] 두 대의 컴퓨터로 돌아가는 리액트 (React for Two Computers | Dan Abramov)

🍀 마치면서

📚 References

'👩🏻‍💻 dev' 카테고리의 다른 글

티스토리툴바

[⚛️ React conf 2024] 두 대의 컴퓨터로 돌아가는 리액트 (React for Two Computers | Dan Abramov)

🍀 마치면서

📚 References

'👩🏻‍💻 dev' 카테고리의 다른 글

'👩🏻‍💻 dev' Related Articles

티스토리툴바