FrontOverflow

개발자를 위한 슬라이드 작성 도구

안녕하세요, 소플입니다.

이미 유튜브 영상을 보신분들도 계시겠지만, 지난 주에 2024년 리액트 컨퍼런스가 있었습니다.

이틀에 걸쳐서 진행된 이번 행사에서는 React와 React Native에 대한 다양한 주제들로 굉장히 풍성했는데요,

이번 매거진에서는 먼저 React Conf 2024의 첫째날에 발표된 내용들을 한 번 요약해서 살펴보도록 하겠습니다 😀

Keynote
Vanilla React
What's new in React 19
React Unpacked: A Roadmap to React 19
Forget About Memo
React for Two Computers
Introducing Universal React Server Components in Expo Router
Real-time server components
React 19 Deep Dive: Coordinating HTML
Let's break React's rules
RedwoodJS, now with React Server Components!
React team Q&A

Keynote

💡 소플의 한 줄 요약
성능과 개발자 경험을 대폭 향상 시킨 리액트 19. 그리고 점점 더 커져가는 리액트 생태계와 커뮤니티.

🔗 영상 링크

Joe Savona

발표자 소개
- 메타 리액트 팀 엔지니어
- 과거 프로젝트: React, Relay(GraphQL client), Skip(메타에서 개발한 실험적 반응형 프로그래밍 언어)
과거 경험
- 2010년 일본에서 첫 풀타임 웹 개발자로 일함
- HTML, CSS, jQuery 사용
- IE6에서 테스트 (FTP 사용)
리액트의 목표
- 누구나 훌륭한 사용자 경험(UX)을 쉽게 구축할 수 있도록 지원
- 좋은 디자인, 빠른 앱 시작, 신속한 사용자 이동
- 애니메이션, 디자인 조정 등 정교한 UI 요소 포함
개발자 경험(DX)
- 기본 기능뿐만 아니라 정교한 UI 구축을 쉽게 만듦
- 학생, 취미 개발자, 디자이너, 백엔드 엔지니어 등 다양한 사용자 지원
발표 내용
- 리액트 생태계 현황
- 리액트 19로 구축 가능한 경험
- 리액트의 미래 전망

Lauren

다운로드 횟수 증가
- 2021년에는 리액트가 주간 1350만 회 다운로드되었으나, 2023년에는 10억 회 이상 다운로드됨.
React Dev Tools 사용자 증가
- 2019년에는 180만 명의 활성 사용자가 있었으나, 현재는 그 수가 두 배 이상 증가.
개발자 조사 결과
- 2023년 스택 오버플로 조사에서 JavaScript 사용자는 63%, React 사용자는 40.5%.
- 리액트를 통해 코딩을 배운 사람들은 36%로 나타남.
커뮤니티와 공헌
- 리액트 커뮤니티의 성장과 개발자들이 공헌한 결과로 리액트가 발전함을 강조.
- 다양한 이야기와 경험을 공유하며 리액트의 미래를 논의.
리액트 선택 이유
- 개인적인 경험 공유: 대학 후 몇 년 후 첫 번째 직장에서 리액트를 선택한 배경과 경험 설명.
리액트의 목표와 기능
- 리액트의 장기 목표는 뛰어난 사용자 경험을 쉽게 만드는 것.
- React 19에서의 새로운 기능과 업데이트 소개.

Josh

HTML 문서 조정의 어려움과 해결책
- React 팀은 HTML 문서의 순서 문제를 해결하기 위해 노력함.
- 예를 들어, 서버 렌더링 시 페이지 특정 정보를 head 태그에 삽입하는 방법을 설명.
- StyleSheet의 순서 문제를 해결하기 위해 precedence 속성 도입.
- precedence를 사용하여 StyleSheet의 로딩 순서를 관리하고, 중복 로딩을 방지.
StyleSheet 관리 개선
- 서버 렌더링 중에도 StyleSheet를 적절히 관리하여 브라우저에서 "flash of unstyled content"를 방지.
- CSS에 대한 Suspense 기능 도입으로, StyleSheet가 로드될 때까지 컨텐츠 렌더링을 유예.
기타 HTML 기능 지원
- 비동기 스크립트의 호이스팅 및 중복 제거 지원.
- 브라우저 힌트(preloads 등)에 대한 새로운 API 지원.
Hydration 개선 사항
- React 18에서는 selective hydration을 도입하였으며, React 19에서는 이를 더욱 개선.
- Body 및 Head의 추가 요소에 대해 더욱 허용적이고, 하이드레이션 오류 메시지의 개선.
마무리
- React의 HTML 조정 기능에 대한 자세한 정보는 React 문서에서 확인할 수 있음.
- React 19의 새로운 기능에 대한 궁금증은 오후의 Josh의 추가 발표에서 더 자세히 설명할 예정임.

Andrew

React 19의 새로운 개선 사항
- 액션 (Actions)
  - 액션은 서버 컴포넌트 프레임워크(예: Next.js)에서 사용할 수 있는 서버 액션의 개념을 기반으로 하지만, 클라이언트에서도 사용 가능.
  - 사용자 입력에 대한 데이터 비동기적 업데이트를 위한 패턴.
    - 원문: First-class pattern for asynchronous data updates in response to user input
  - React 프로그래밍 모델에 완벽하게 통합되어, streaming, selective hydration, Suspense, 및 Transitions 기능과 함께 작동.

// Actions 사용 예시
<form action="/checkout">

HTML form action 패턴과의 비교
- 클래식한 HTML 폼에서는 서버 엔드포인트를 지정하기 위해 action 속성에 URL을 전달.
- React Action은 이러한 기본 패턴을 확장하여 함수를 action 속성에 전달하여 동작을 정의할 수 있게 함.

// HTML Action
<form action="/checkout" />

// React Action
<form
    action={async (data: FormData) => {
        await submitDataToServer(data);
        redirect('/orders');
    }}
/>

Action의 주요 특징
- 액션 함수는 일반 함수로, 조합 가능하며 클라이언트 또는 서버에서 정의할 수 있음.
- 액션은 Hydration 이전에도 상호작용 가능하며, 클라이언트에서 수행될 때 적절하게 대응.
- 비동기 로직 지원과 같은 복잡한 UX 패턴을 구현하기 위한 다양한 훅 제공
  - useOptimistic()
  - useFormStatus()
  - useActionState()

// React Server Action (in a server module)
<form
    action={async (data: FormData) => {
        'use server';
        await submitDataToServer(data);
        redirect('/orders');
    }}
/>

JSX 런타임 개선
- ref 프로퍼티
  - React 19에서 ref가 이제 prop으로 취급됨.
  - forwardRef는 다시 사용할 필요 없음!
  - 예전에는 특별한 동작을 보였으나 이제는 일반적인 prop으로 취급되어 컴포지션을 보다 쉽게 만들 수 있음.
  - 기존의 string refs 및 Legacy context API는 제거됨.
React 19의 안정화 및 출시 계획
- React 19 베타 버전이 호평을 받아 RC(Release Candidate)로 업그레이드 됨.
- 몇 주 내에 안정 버전이 출시될 예정.
React의 미래 전망
- React 팀은 성능을 향상시키는 새로운 방법을 모색 중이며, 개발자 경험을 개선하고자 함.
  - 별다른 코드 수정 없이도 성능 향상이 되도록
- React 19에서는 개발자가 더 나은 성능과 사용자 경험을 달성할 수 있는 다양한 기능과 개선 사항을 제공할 예정임.

Sathya

음악 플레이어 앱 데모
- 음악 플레이어 앱을 소개하며, 고성능 MacBook에서는 빠르게 동작하지만 낮은 사양의 기기에서는 성능이 저하될 수 있다는 점을 언급.
성능 저하 발견
- Chrome 성능 패널을 사용하여 슬라이더를 드래그할 때 약간의 버벅임이 발생한다고 설명.
문제 해결
- Playlist가 렌더링되는 문제를 발견하고, 이를 React의 memo를 사용하여 최적화.
컴포넌트 최적화
- 최적화된 코드는 성능 문제를 해결하지만, 나중에 다른 엔지니어가 코드를 업데이트하면 최적화된 부분이 사라질 수 있음을 언급.
Memoization 문제
- filteredSongs가 렌더링마다 재생성되어 최적화가 깨질 수 있다고 설명하고, 이를 useMemo()로 감싸서 해결함.
자동 최적화 도구 소개
- 수동으로 Memoization 코드를 추가하지 않고도 자동으로 컴포넌트 최적화를 수행하는 React Compiler 도구를 소개.
React 컴파일러 동작 원리
- React Compiler가 코드를 분석하여 데이터 흐름 그래프를 구축하고, 상태 변경 시 필요한 부분만 업데이트하여 성능을 최적화한다고 설명함.
컴파일러의 장점
- 기존의 React 코드를 수정하지 않고도 성능을 개선할 수 있으며, 코드도 보다 깔끔하고 간결해진다고 강조함.
프로덕션 환경 적용
- Meta에서 이미 React 컴파일러를 사용하여 성공적으로 성능 개선을 이루고 있음.

Mofei

앱 개요
- Meta에서의 애플리케이션 코드를 살펴보고, React 컴파일러가 어떻게 성능을 향상시키는지 설명하기 전에, 이들 앱이 어떻게 구성되어 있는지 알아야 한다고 소개.
코드 매핑
- Meta에서의 React 코드는 두 가지 차원에 매핑될 수 있다고 설명.
  - 앱 자체의 반응 속도가 얼마나 빠른지
  - 코드가 비즈니스 로직을 명확하게 기술하는 정도(가독성)
최적화와 가독성
- 대부분의 코드는 이 사분면에 위치하며, 이 코드는 이해하기 쉽지만 성능 최적화가 충분하지 않을 수 있다고 언급함.
수동 최적화
- useMemo()와 useCallback()을 수동으로 최적화하는 경우, 코드는 더 빠르지만 가독성이 저하될 수 있다고 설명.
코드 예시
- 실제 Meta 코드베이스에서 가져온 React 컴포넌트 예시를 보여주며, 수동 최적화로 인해 코드가 길어지고 어려워진다는 것을 시각적으로 설명함.
앱 소개
- Oculus Quest Store와 instagram.com 같은 Meta의 실제 앱을 소개하며, 이들 앱에서 React 컴파일러를 적용한 성과를 공유함.
성과
- Quest Store와 instagram.com에서 React 컴파일러를 적용한 결과,
  - 2.5배 빠른 인터랙션
  - 12% 빠른 초기 로드, 빠른 내비게이션
메모리 사용 및 충돌
- 성능 향상에도 불구하고 메모리 사용량이나 전체 충돌 발생율에는 영향을 미치지 않았다고 설명.
  - 메모리 사용량 0% 증가
  - 17% 더 적어진 코드 라인 수
컴파일러의 역할 (Same code, faster by default)
- React 컴파일러가 수동으로 추가된 Memoization 외에도 최적화 기회를 찾아내어 성능을 더욱 개선할 수 있다고 설명.
개발자 경험
- 개발자는 이제 수동 최적화 코드를 제거하고도 앱 성능을 유지할 수 있다고 강조함.

키노트 마무리

React 컴파일러 개요
- React 컴파일러를 사용하면 기존 코드를 그대로 유지하면서 Memoization 코드를 수동으로 추가할 필요가 없어지며, 코드가 더욱 깔끔하고 간결해질 수 있음
실제 애플리케이션 성능 개선
- Meta에서 테스트하고 적용한 결과, React 컴파일러는 실제 애플리케이션에서 상당한 성능 향상을 제공할 수 있음
오픈소스 공개
- 오늘부터 React 컴파일러를 오픈소스로 공개하며, 널리 사용될 수 있도록 준비 중임
실험적 릴리스
- React 19 RC에서 실험적인 컴파일러 버전을 설치할 수 있으며, Babel 플러그인을 통해 간편하게 설치할 수 있음
ESLint 플러그인
- ESLint 플러그인도 제공되어 현재 규칙의 확장된 버전을 제공하며 프로젝트의 위반 여부를 보여줌
컴파일러 워킹 그룹
- React 컴파일러 워킹 그룹을 시작하여 초기 사용자들로부터 높은 신호의 피드백을 수집할 계획
토크 및 세션
- 오늘과 내일 열리는 토크와 세션에서 컴파일러에 대해 더 자세히 배울 수 있는 기회를 제공함
감사의 말
- 약 2년 동안의 개발 과정을 거쳐 이를 가능하게 한 동료들과 Meta의 리액트 팀에게 감사의 말을 전함

🔗 관련 링크
React Compiler (https://react.dev/learn/react-compiler)
React Compiler Playground (https://playground.react.dev/)

# Try the React Compiler in React 19
$ npm i babel-plugin-react-compiler --save-exact
$ npm i eslint-plugin-react-compiler --save-exact

Vanilla React

💡 소플의 한 줄 요약
React Router의 역사와 미래, 그리고 프레임워크 없이 리액트를 사용하는 Vanilla React에 대한 이야기

🔗 영상 링크

React Router의 역사

첫 커밋: 10년 전, 2013년 5월 9일
초기 커밋: 밤새 작업하며 React에 대한 열정을 느꼈음
현재: Remix 팀과 함께 React Router와 Remix 개발 중

Remix와 Shopify

Remix: React Router 위에 구축된 풀스택 웹 프레임워크
Shopify: Remix 팀을 인수하여 함께 작업 중
목표: 이상주의와 실용주의의 균형을 맞추며 프레임워크 개발

Vanilla React와 프레임워크

React 문서: 전체 사이트를 React로 구축할 경우 프레임워크 사용 권장
Vanilla React: 프레임워크 없이 React를 사용하는 경우
React Router 사용: 많은 Vanilla React 앱이 React Router 사용

React Router의 현황

사용 통계: 780만 개의 GitHub 저장소에서 React Router 사용
Shopify: 500만 라인의 React 및 React Router 코드 사용
문제 해결: 오래된 React 앱을 현대화하는 방법 논의

Create React App의 현황

현황: 업데이트가 거의 없는 상태, 프로젝트가 사실상 중단됨
대안: 많은 커뮤니티가 Vite로 이동 중

React Router V7

목표: 점진적 개선을 통해 기존 React Router 앱을 현대화
기능: 코드 스플리팅, 데이터 로딩, 폼 액션, 서버 렌더링, 정적 프리렌더링, RSC 지원
점진적 도입: 리팩토링 없이 점진적으로 새로운 기능 도입 가능

데모

기능 시연: React Router V7의 새로운 기능을 데모로 시연
코드 스플리팅: 자동 코드 스플리팅 기능
클라이언트 로더: 클라이언트 로더를 사용한 데이터 로딩
서버 렌더링: SSR 플래그를 통해 서버 렌더링 활성화
정적 프리렌더링: 빌드 시 정적 HTML 생성
서버 컴포넌트: 서버 컴포넌트를 로더에서 반환하여 서버 렌더링 지원

결론

React Router V7은 점진적 개선을 통해 기존 앱을 현대화하고, 향후 10년간 React의 발전을 지원할 준비가 되어 있음

What's new in React 19

💡 소플의 한 줄 요약
리액트 19의 새로운 기능들을 아주 깔끔하고 시각적으로 보기 좋게 설명한 훌륭한 발표!

🔗 영상 링크

`startTransition()`에서 비동기 함수 사용 가능

transition 과정에서 상태 업데이트를 비긴급으로 표시 가능함.

UI 응답성 향상

React가 모든 업데이트를 단일 작업으로 처리하는 대신, 매 5밀리초마다 메인 스레드에 반환하여 다른 작업을 처리할 수 있도록 함.
사용자가 웹사이트와 상호작용하는 동안 UI가 반응하지 않는 문제를 해소함.

Transition의 활용 사례

이전에는 수작업으로 pending 상태를 설정했음.
이제 Transition를 사용하여 상태 업데이트와 데이터를 관리할 수 있음.
React가 여러 transition을 배치 처리하여 단일 페인트로 결과를 이끌어냄.

Action 및 `useActionState()` 훅

Transition을 시작하는 함수는 Action으로 호출됨.
새로운 훅인 useActionState() 훅으로 쉽게 Action과 상태 업데이트를 처리할 수 있음.
이 훅은 세 가지 값을 반환함: Action State, Action 함수, Pending State Indicator.

<form action={action}>

<button formAction={action}>

`useFormStatus()`

form의 child component에서만 사용 가능

const { data, pending, method, action } = useFormStatus();

Optimistic UI 업데이트 (`useOptimistic()` 훅)

useOptimistic() 훅 사용으로 비동기 작업이 완료되기 전에 UI를 업데이트함.
서버로부터 반환된 데이터를 미리 예측하여 사용자가 즉각적인 피드백을 받을 수 있음.

const [allValue, addOptimisticValue] = useOptimistic(
    state,
    updateFunction
);

const [allValue, setOptimisticValue] = useOptimistic(
    state,
    (currentState, optimisticValue) => {
        return [...currentState, optimisticValue];
    }
);

서버 컴포넌트의 도입

서버 컴포넌트가 JSON 형식으로 직렬화된 컴포넌트 트리를 클라이언트에 전송함.
서버에서 데이터베이스나 파일 시스템에 접근 가능함.
Suspense 경계를 활용하여 부분적 스트리밍 가능함.

클라이언트 및 서버 기능의 구분

'use client' 지시어로 클라이언트 측에서만 필요로 하는 컴포넌트를 명시함.
use API를 사용하여 비동기 데이터를 관리하며 Suspense 및 Error Boundary와 통합됨.

훅으로의 접근 제한 해소

use API로 콘텍스트를 조건부로 호출 가능함.
이 API는 기존 useContext() 훅을 대체함.

const resolvedData = use(promise);

const context = use(Context);

Server Actions

'use server' 지시어로 서버 측에서 실행되는 함수 작성 가능.
프레임워크가 액션 상태를 기록하고 관리함.

`ref` as a `prop` (`ref`가 이제 `prop`이다!)

function Input({ ref }) {
    return <input ref={ref} ... />
}

function Input() {
    ...

    return (
        <input
            ref={(ref) => {
                ...
                return () => {
                    ref.removeEventHandler('change', handleInputChange);
                }
            }}
        />
    );
}

Document metadata

React 19는 문서 메타데이터 태그를 직접 컴포넌트에서 렌더링 가능함.

function BlogPost() {
    return (
        <div>
            <title>{post.title}</title>
            <meta name="author" content={post.author} />
            <meta property="og:image" content={post.image} />
            <h1>{post.title}</h1>
        </div>
    );
}

Stylesheet support

스타일시트를 직접 컴포넌트에서 로드 및 관리 가능.

function Component() {
    return (
        ...
        <link rel="stylesheet" href="/styles/styles.css" precedence="default" />
        <link rel="stylesheet" hief="/styles/button.css" precedence="default" />
        <link rel="stylesheet" hief="/styles/article.css" precedence="high" />
        ...
    )
}

Preloading APIs

ReactDOM에 preload, prefetchDNS 등 새로운 API 추가

function Component() {
    preload("https: ///font.woff", { as: "font" });
    preload("https://../styles.css", { as: "stylesheet" });
    preconnect("https://...");
    preinit("https://../script.js", { as: "script" });
    prefetchDNS("https://..");

    return ...
}

자동으로 순서가 조정됨

<head>
    <link rel="prefetch-dns" href="https://…">
    <link rel="preconnect" href="https://...">
    <link rel="preload" as="font" href="https://.../font.woff">
    <link rel="preload" as="style" href="https://.../styles.css">
    <script async="" src="https://.../script.js"></script>
</head>

React Unpacked: A Roadmap to React 19

💡 소플의 한 줄 요약
실제 라이브 코딩과 데모 시연을 통해 리액트 19의 Action에 관해 이해할 수 있는 재미있는 시간

🔗 영상 링크

기본 앱 설명

우측에 간단한 디버그 툴바가 포함된 앱 시연.
티셔츠의 재고 상태 및 설명을 볼 수 있는 기능.
장바구니에 티셔츠 추가 시 팬딩 UI와 에러 UI 표시.

현재 앱의 문제점

이벤트 핸들러에 경쟁 상태가 발생함.
두 번 클릭하면 중첩된 비동기 요청으로 인해 상태가 불일치 발생.

액션 API 소개: `startTransition()`

startTransition()으로 비동기 처리를 액션으로 변환 가능.
리액트 19에서는 startTransition()에서 비동기 함수(async) 사용 가능
경쟁 상태 해결과 함께 UI 업데이트의 일관성 향상됨.

`useTransition()` 훅

useTransition() 훅 도입으로 pending 상태 자동 관리.
이벤트 핸들러에서 수동으로 pending 상태를 삭제 및 파일 로딩 줄이기 가능.

form에서 Action 사용법

form 요소에 action property 사용.
onSubmit => action
디폴트 제출 처리 방지 기능 제공.
form을 일종의 Context Provider로 생각하면 됨.
자식 컴포넌트에서 useFormStatus()를 사용 가능

데이터 상태 관리: `useActionState()`

useActionState() 훅으로 액션의 상태 및 업데이트를 관리.
비동기 함수와 함께 데이터를 쉽게 관리 가능.

Optimistic UI 업데이트: `useOptimistic()`

useOptimistic() 훅을 사용하여 비동기 작업 중 UI를 미리 업데이트.
서버 데이터와 클라이언트 데이터의 불일치 문제 해결.
pending 상태와 상관없이 최종 상태를 반영함으로써 일관성 유지.

서버 컴포넌트 통합

서버 컴포넌트로 전환하여 데이터를 직접 쿼리.
'use server' 지시어로 서버 측 액션 호출 가능.
서버 컴포넌트와 Action을 결합해 클라이언트/서버 양측에서 동일하게 작동.

정리와 결론

Action 도입으로 코드 읽기와 유지보수성 향상.
경쟁 상태 문제 해결 및 최상의 성능 제공.
클라이언트 및 서버 컴포넌트에서 동일하게 작동하여 재사용성 높임.
Action을 통해 비동기 작업의 상태 관리 간소화.
Action이 리액트 생태계 전반에 미칠 긍정적인 영향 기대.

Forget About Memo

💡 소플의 한 줄 요약
BlueSky에 React Compiler가 적용된 버전과 적용되지 않은 버전을 비교하여 데모 시연
"React Compiler is not magic, it's computer science."

🔗 영상 링크

서론

Lauren: 리액트 팀의 엔지니어
리액트 컴파일러에 대해 발표
리액트 컴파일러 오픈 소스 공개, 메타 앱에 적용 과정 소개.

BlueSky 앱에 컴파일러 적용 시연

BlueSky는 트위터의 탈중앙화 대안 앱임.
리액트 컴파일러 설치 및 Babel 설정 추가.
리액트 DevTools에서 컴파일러가 작동 중임을 확인.

포스트 컨트롤 컴포넌트 분석

컴파일러가 자동으로 Memoization 수행 결과를 확인.
기존 수동 Memoization보다 더 세밀하게 최적화하는 것을 확인. (Automatic fine-grained memo)

새로운 코드 추가

포스트 컨트롤에 싫어요 버튼 추가.
브라우저에서 기능이 정상 작동하는지 확인.

불필요한 렌더링 문제 식별 및 해결

useRef와 같은 비정상적인 코드 사용으로 인해 리액트 컴파일러가 최적화를 건너뛸 수 있음.
코드를 별도의 훅으로 추출하여 컴파일러 최적화를 재활성화.

모든 플랫폼에서의 작동

BlueSky가 모든 플랫폼에서 동작하도록 설계된 것을 강조. (Works on every platform)
리액트 컴파일러가 코드 변경 없이 모든 플랫폼에서 동일하게 동작함. (Drop in, no rewrites)

리액트 비전과 컴파일러

개발자 경험과 사용자 경험을 모두 향상시키는 것을 목표로 함.
리액트 앱이 컴파일러를 통해 성능을 극대화 목표.

간편한 컴파일러 도입

코드베이스가 리액트 규칙을 잘 따르는 경우 컴파일러 도입이 간편함.
- 참고 링크: Rules of React (https://react.dev/reference/rules)
리액트 컴파일러는 애플리케이션의 성능을 높이는 데 도움을 줌.

Find and fix Rules of React issues

yarn install eslint-plugin-react-compiler

Estimate the effort

npx react-complier-healthcheck

대규모 계산 최적화

리액트 컴파일러는 리액트 컴포넌트와 훅을 최적화.
나머지 함수들은 별도로 Memoization 해야 함.

결론

비동기로 리액션이 최적화됨으로써 더 나은 사용자 경험을 제공.
React Compiler Working Group
- 피드백 수집 및 제공
참고 링크: fb.me/react-compiler

React for Two Computers

💡 소플의 한 줄 요약
서버와 클라이언트 두 컴퓨터에서의 리액트에 대한 이야기

🔗 영상 링크

소개

BlueSky 소속 소프트웨어 엔지니어
블로그 형태로 작성하려 했지만, 말로 설명하는 것이 더 적절해 발표 형식을 선택함.
발표는 퍼포먼스이며, 발표자는 과거의 자신이 준비한 내용을 현재의 자신이 전달함.

서버와 클라이언트 관계

서버와 클라이언트 간의 관계는 일종의 협업으로 이해됨.
클라이언트는 요청을 보내고, 서버는 HTML과 스크립트 형태의 응답을 보냄.

예제 소개 - 고양이 이름 생성기

고양이 이름을 생성할 수 있는 간단한 앱을 소개.
기존에는 하드코딩된 배열에서 고양이 이름을 선택했으나, API 호출로 변경함.

비동기 문제

API 호출로 인해 사용자 경험이 지연될 수 있음.
일부 인터랙션은 동기적이어야 사용자가 불편함을 느끼지 않음.

서버 코드 최적화

데이터를 서버에서 미리 로드하여 클라이언트 코드에 전달하는 방식으로 변경.
서버에서 JSON 데이터를 문자열로 변환하여 클라이언트로 전달.

코드 단순화

서버와 클라이언트 코드가 하나의 프로그램처럼 작동하도록 내부 구조를 재조정.
불필요한 API 호출 제거 및 데이터 흐름 단순화.

컴포넌트 접근 방식

기존 코드를 리액트 컴포넌트로 변환하여 모듈화 및 재사용성 높임.
CatNameGenerator와 같은 컴포넌트를 사용하여 서버와 클라이언트를 분리하고 데이터 전송.

리액트 서버 컴포넌트 (RSC)

리액트 서버 컴포넌트를 사용하여 서버와 클라이언트 간의 명확한 경계를 정의.
export async function으로 컴포넌트를 정의하고, 필요한 데이터를 props로 전달.

요약 및 결론

프레젠테이션을 통해 서버와 클라이언트 간의 관계를 단순화하고 성능을 개선하는 방법을 탐구.
과거와 현재, 서버와 클라이언트 간의 상호작용을 한 프로그램으로 통합하여 설명.

Introducing Universal React Server Components in Expo Router

💡 소플의 한 줄 요약
Expo Router와 React Server Component로 인해 다가올 네이티브 앱과 웹 개발의 새로운 시대

🔗 영상 링크

소개

Evan Bacon, Expo Router의 창시자

React Native의 시작과 현재

React Native는 약 10년 전 첫 리액트 컨퍼런스에서 발표되었음.
웹의 좋은 부분을 강조하는 단순한 개념에서 출발함.
현재 가장 영향력 있는 클라이언트 사이드 애플리케이션 개발 프레임워크로 성장함.
매일 수백 개의 인기 앱에 사용되며 성장세가 지속 중임.

Expo Router 설명

File System-based Routing for React Native

Expo Router는 파일 기반 라우터로 웹과 네이티브 플랫폼에서 동작하는 리액트 앱을 구축함.
파일을 앱 디렉터리에 생성함으로써 강력한 내비게이션 기능을 즉시 제공함.
링크 및 href 같은 친숙한 웹 API 사용, 중첩된 라우팅 시스템을 통해 UI를 폴더로 조직화.
네이티브 프리미티브를 사용하여 플랫폼에 맞는 전환 효과를 제공함.

데이터 페칭과 서버 렌더링 중요성

대부분의 네이티브 앱은 사실상 Single Page Website처럼 동작하며 데이터 페칭과 렌더링을 클라이언트 측에서 수행함.
이는 느린 성능과 네트워킹 문제를 초래함.
인기 있는 네이티브 앱(예: Lyft, Netflix, Reddit)은 서버 기반 UI를 사용하여 유연한 UI 렌더링을 수행함.

서버 기반 UI 접근의 어려움

서버 기반 UI는 다양한 사용자 유형, 위치, 통화 등에 따라 높은 변동성을 가진 UI를 A/B 테스트하기 위해 사용됨.
1인 개발자들이 접근하기엔 매우 복잡함.

Expo Router 목표

서버 기반 UI를 모든 개발자에게 제공하고 이를 최고의 버전으로 구현하는 것이 목표임.
이를 위해 리액트 서버 컴포넌트를 모든 플랫폼에 도입.
현재 초기 개발 단계에 있으며, 발전 상황을 공유하고자 함.

리액트 서버 컴포넌트 적용

AI 앱의 경우, 스트리밍과 서버 렌더링이 매우 중요한 부분임.
Expo Router를 사용하면 AI 앱 구축이 매우 쉬워짐.
예시로 ChatGPT와 같은 앱 구현, 오픈 AI와의 리액트 서버 액션을 통해 네이티브 텍스트 스트리밍.

모바일 앱에서 RSC 사용한 데모 시연

Live SSR, Server-Driven Native Apps

영화 앱을 통해 복잡한 네이티브 UI 구현 가능성 시연.
서버 렌더링을 통해 네이티브 UI 카드, 이미지, UI 메뉴, 애니메이션 등이 포함된 인터랙티브 영화 카드를 구현함.
서버 액션을 통해 일정 카드 생성, 개인정보 승인 요청 등 다양한 기능 구현 가능.

개발자 경험

서버와 클라이언트를 유연하게 넘나드는 경험 제공.
코드 작성 양은 단순 텍스트 예시와 크게 다르지 않음.
클라이언트 코드와 분리하여 서버가 렌더링, 보안 문제 해결.

전반적인 효과

서버 렌더링이 가능한 멀티플랫폼 환경을 제공, 앱의 성능과 사용자 경험 극대화.
API를 단일 플랫폼으로 구성하여 모든 플랫폼에서 동작.
각종 네트워크 요청, 병렬 요청 등을 자동 처리.

향후 계획

Expo SDK 51, React 19, 새로운 아키텍처 등을 이용한 앱 출시.
서버 렌더링, 서버 액션, 동시성 라우터 등은 빠르게 개발 중.
지속적인 발전을 예고하며, 관련 개발자 채용도 진행 중.

Real-time server components

💡 소플의 한 줄 요약
서버리스 환경에서의 상태를 유지하는 방법(Stateful Serverless)에 대한 이야기

🔗 영상 링크

소개

리액트 코어 팀에서 활동, CSS-in-JS 라이브러리 제작, 은행에서 근무.

Party Kit 및 Cloudflare

Stateful Serverless 개념에 대해 집착함.
Party Kit이라는 회사를 설립, 협업 도구(인터랙티브 보드, 텍스트 편집기 등)를 개발.
- https://github.com/partykit/partykit/
최근 Cloudflare에 인수되어 다시 대기업에서 일하게 됨.

서버 모델 문제점

Serverless 모델은 요청을 처리 후 상태를 잃어버려 JavaScript나 TypeScript의 기본 가정을 깨버림.
예시: 히트 카운터 작성 시 카운터 값이 전송 요청마다 초기화됨.

상태를 보존하는 서버 개념

Cloudflare의 Durable Objects를 소개, 상태를 보존하는 서버를 ID 기반으로 제공함.
예시: 채팅방의 ID마다 프로세스를 유지하여 연결된 웹소켓에 메시지를 분배.

실시간 애플리케이션 구축

Durable Objects를 통해 실시간 채팅방, 협업 도구 등 다양한 애플리케이션 구축 가능.
예시: 스폰지밥 케이스로 모든 메시지를 변환하는 비즈니스 로직 추가.

리액트 서버 컴포넌트와 상태 관리

리액트 서버 컴포넌트 사용 시 상태와 컨텍스트 사용 불가 문제.
예시: 간단한 카운터 컴포넌트에서 상태 관리 불가.
해결 방법: 클라이언트 컴포넌트로 분리.

React Party 소개

React Party라는 새로운 프로젝트를 시작함.
서버리스 컴퓨팅을 통해 상태를 유지하고 리액트 훅 같은 API 노출.
웹소켓을 사용한 실시간 통신, 상태 및 컨텍스트 지원.

사용 사례와 적용 가능성

React Party는 채팅방, 협업 도구, 게임 서버, AI 에이전트, 데이터 그리드 등에 적합.
기존 리액트 서버 컴포넌트 프레임워크(예: Remix, Next.js, Waku, Redwood.js)와 통합 가능성.

마무리 및 데모

QR 코드를 통해 참관자들이 예제를 체험할 수 있게 함.
실시간 사용자 위치를 보여주는 글로브 예제 시연.
약 200명이 참여 중이며 간단한 서버 및 클라이언트 코드로 구현됨.

React 19 Deep Dive: Coordinating HTML

💡 소플의 한 줄 요약
이제 리액트 컴포넌트에서 메타데이터, HTML, CSS 등을 직접 로딩할 수 있다!

🔗 영상 링크

소개

Vercel의 리액트 팀 소속.
과거 리액트 컨퍼런스 참석 경험, 현재는 발표자로 참여.
이번 발표는 오늘 아침 키노트의 내용을 심화하는 내용.

Metadata and asset loading in React 19

비주얼 HTML과 비주얼이 아닌 HTML을 함께 구성할 수 있는 새 기능 추가.
컴포넌트에서 문서 메타데이터, stylesheet, 비동기 스크립트를 직접 렌더링 가능.

function Article() {
    return (
        <>
            <title>Story Time!</title>
            <link rel="stylesheet" href="..." />
            <article className="i-look-like-an-article">
                Let me tell you a story... ba dum cha!
            </article>
        <>
    );
}

<!DOCTYPE html>
<html>
    <head>
        <title>Story Time!</title>
        <link rel="stylesheet" href="...">
    </head>
    <body>
        <article class="i-look-like-an-article">
            Let me tell you a story... ba dum cha!
        </article>
    </body>
</html>

import { preload } from 'react-dom';

function MyComponent() {
    function onHover() {
        preload('somefont.woff', { as: 'font' });
        preload('someimage.jpg', { as: 'image' })
        preload('somestyles.css', { as: 'style' });
    }    

    return (
        <Link onHover={onHover}>
            Navigate
        </Link>
    );
}

문제 재확인

로컬 컴포넌트를 이해할 수 있어야 하지만, 과거에는 페이지 제목이나 스타일시트를 적절히 위치시키지 못함.
해결책은 별도의 시스템에서 스타일 로드나 메타데이터 조정을 해야 했음.

Tool 호환성

HTML이 종종 봇이나 다른 도구에 의해 소비됨.
따라서 스펙에 명시된 위치를 준수하기 위해 노력함.
스트리밍 UI가 사용자 경험을 향상시키기 때문에 반응적 처리 필요성 대두.

React 19 preloading APIs

사이트 로딩 속도는 사용자 경험에 중요한 요소.
비동기 스크립트를 권장하며 이를 통해 성능 최적화.
프리로드 태그를 사용하여 자원들을 미리 로드 가능.

import {
    prefetchDNS,
    preconnect,
    preload,
    preloadModule,
    preinit,
    preinitModule,
} from "react-dom";

우선순위 설정

가장 긴급한 자원이 먼저 로드되도록 설정.
React는 다양한 힌트를 줌으로써 로딩 우선순위를 조정.

Stylesheet 조정

Stylesheet는 순서에 민감함.
React 19에서는 precedence를 통해 스타일시트 순서 조정.
글로벌 순서 문제 해결을 위해 스트리밍과 연동된 스타일시트 로드 보장.

React can hoist style tags too with precedence and a unique id (href)

function MyComponent () {
    return (
        <style
            href="some-rule-id"
            precedence="you-tell-me!"
        >
        rules...
        </style>
    );
}

Suspense for CSS-in-JS

CSS-in-JS 라이브러리와의 통합을 통해 서버 측 렌더링 복잡성을 제거함.
프리로드 스타일시트의 성능 최적화 및 구현 간소화.

번들링 시스템

번들러가 비동기적으로 모듈을 로드할 때, React의 새 기능을 사용하여 코드 실행과 스타일 로딩을 병렬로 처리.

결론

React 19는 컴포넌트가 HTML을 출력할 때 발생하는 복잡한 문제를 효과적으로 해결.
이러한 새 기능들은 유저 스페이스에서 해결하기 어려운 문제들을 최적화하고 효율적으로 처리함.
개발자들이 더 간단한 컴포넌트를 작성할 수 있도록 도움을 줌.

Let's break React's rules

💡 소플의 한 줄 요약
실제 데모를 통해 알아보는 리액트 훅의 규칙

🔗 영상 링크

소개

BAM의 React Native 기술자
오늘 리액트 훅 규칙을 깨면서 리액트에 대해 더 깊이 이해하려고 함.

첫 번째 규칙: 훅을 꼭 최상위 레벨에서만 호출해야 함.

조건부로 훅을 호출함으로써 예제를 보여줌.
리액트는 처음 앱을 실행할 때 컴포넌트의 가상 트리를 생성함, 이를 파이버 트리라고 함.
파이버 트리는 컴포넌트, 데이터, 훅, 그리고 props 값을 포함하고 있음.
트리를 통해 HTML element를 DOM에 주입하여 화면에 표시함.
예제에서 처음 컴포넌트 호출은 문제없이 작동함.
그러나 상태를 변경하는 버튼을 클릭하면 다시 렌더링하면서 문제가 발생함.
훅은 연결 리스트 시퀀스로 저장되기 때문에, 조건부로 호출하면 순서가 혼란스러워짐.
후에 컴포넌트는 잘못된 훅 값을 읽으려고 시도함.

두 번째 규칙: 리액트 함수 컴포넌트 내부에서만 훅을 사용해야 함.

리액트 네이티브 예제를 통해 이 규칙을 깨는 방법을 보여줌.
리액트 네이티브의 FlatList를 사용해 여러 레시피를 렌더링함.
렌더 함수 내에서 훅을 조건부로 호출하는 문제가 발생함.
올바른 사용 방법은 컴포넌트 내부에서 훅을 사용하는 것임.
훅이 올바르게 컴포넌트 내부에서 호출되면, 렌더링 과정이 올바르게 작동함.
규칙을 지키지 않으면 새로운 요소를 추가할 때 애플리케이션이 충돌할 수 있음.

마무리

훅이 컴포넌트와 연결되는 방식을 이해하고, 규칙을 지키는 것이 중요함.
규칙을 따르는 것이 더 좋은 코드를 작성하는 데 도움이 됨.
리액트의 알고리즘은 변할 수 있지만, 중요한 것은 규칙을 통해 더 나은 코드를 작성하는 이유를 이해하는 것임.

RedwoodJS, now with React Server Components!

💡 소플의 한 줄 요약
데이터의 중요성과 RedwoodJS에 대한 소개 및 홍보

🔗 영상 링크

소개

RedwoodJS 핵심 팀의 리드 유지 관리자

서문

애플리케이션을 구축할 때 중요한 것은 데이터임.
CRUD(생성, 읽기, 업데이트, 삭제)는 전체 애플리케이션 개발의 90%를 차지함.
데이터가 없으면 단지 정적인 웹사이트에 불과함.
다양한 개발 도구들이 등장했지만 여전히 데이터가 핵심임.
데이터는 시각화, 조작, 필터링, 정렬 등을 통해 인사이트와 결정을 내리게 함.

RedwoodJS 소개 (https://redwoodjs.com/)

Redwood는 독립적인 오픈 소스 프로젝트로, Preston Warner Ventures의 후원을 받음.
Redwood를 통해 구축된 애플리케이션들이 1억 달러 이상의 자금을 모았음.
Redwood는 풀스택 프레임워크로, 데이터베이스를 포함한 데이터 레이어를 첫 번째 클래스 지원으로 제공함.
Redwood는 GraphQL뿐만 아니라 리액트 서버 컴포넌트도 지원함.
Redwood의 셀(cell) 기능은 데이터 로딩, 빈 상태, 실패, 성공 상태를 모두 처리하는 독특한 특징임.
서버 셀(Server Cell)는 GraphQL 대신 Prisma 호출을 이용하여 데이터베이스와 연결함.
Redwood의 라우터는 단일 파일(routes.js 또는 routes.ts)을 사용하여 모든 URL을 정의함.
경로 이름(name 속성)을 사용하면 URL 변경 시 모든 링크가 자동으로 동기화됨.
레이아웃 처리 시 특정 URL 규칙이나 파일 이름 규칙에 얽매이지 않음.
Private set을 통해 비밀번호로 보호된 페이지를 쉽게 설정할 수 있음.
인증(Authentication)이 기본적으로 제공되며, 미들웨어와 통합됨.
Redwood는 Storybook과 테스팅 도구를 포함하여 다양한 통합 기능을 제공함.
종속성 관리가 용이하며, 업그레이드는 단일 명령어로 가능함.

React team Q&A

💡 소플의 한 줄 요약
리액트 19의 새로운 기능이 개발된 과정과 다가올 미래에 대한 이야기

🔗 영상 링크

오프닝

발표자가 재밌는 Q&A 세션을 준비하고 있으며, 리액트 팟캐스트 쇼를 3년간 진행했음을 언급함
모든 패널을 초대하여 리액트 팀과의 직설적 대화를 기대한다고 전함

Lauren: React 컴파일러

컴파일러 작업에서의 세부 사항과 Elm, Rust의 영향에 대해 설명
Rust 컴파일러의 진단 기능에서 영감 받음
컴파일 오류 메시지를 인간 친화적으로 만들기 위해 많은 노력을 기울였음

Joe: 컴파일러 개발 과정

React 컴파일러가 지원하는 구문을 점진적으로 확장해온 과정
디버깅과 진단 과정에서의 세부적인 문제 해결 사례
특정 구문을 지원하기 위해 상세한 프로세스를 거쳤다고 함

Jason: 구문 문제 해결

React에서 발생하는 SVG 및 self closing tag 등의 구문 문제를 컴파일러로 해결할 수 있을지 논의

패널 참가자 간 상호 질의: 리액트 컴파일러의 역할

컴파일러의 디버깅과 진단 과정에 대한 세부적인 설명
Memoization과 같은 특정 기능들에 대한 기대와 향후 개발 방향에 대한 논의
Memoization 외에도 다양한 최적화 가능성 탐색 중
상태, 참조, 컨텍스트 등 다양한 영역에서 개선 가능성 있음
API를 줄이고 자동 최적화를 통해 성능 향상 목표

Rick: Babel 플러그인

새로 발표된 컴파일러가 단순한 Babel 플러그인이 아님을 강조
현재는 Babel 플러그인으로 제공되지만, SWC와 같은 다른 도구와의 통합도 계획 중
Rust로 포팅된 컴파일러에 대한 향후 계획 설명
점진적 도입을 통해 쉽게 채택할 수 있도록 함

Josh

리액트 19에서 HTML 관련 개선 사항들이 왜 지금 도입되었는지를 논의
CSS의 복잡성 및 새로운 스트리밍 기능이 도입된 배경 설명

Andrew

새로운 API와 프레임워크 도입에 대한 철학적 논의
useOptimistic()과 같은 훅이 개발자들에게 어떻게 적용될 수 있는지에 대한 설명
React가 다양한 프레임워크들과 어떻게 통합되는지 설명
프레임워크 사용 추천 이유와 이를 통해 얻을 수 있는 이점 논의

Signals에 대한 논의

Signals의 개념 및 React와의 관계
- Signals의 개념과 그 역사적 배경 설명
- Signals가 React의 철학과 구현 방식에 맞지 않는 이유 설명

Dan: 커뮤니티 관련

Server Components의 탄생 배경
- 새로운 기능들의 개발 과정과 커뮤니티와의 소통 방식
- 커뮤니티가 혁신적인 아이디어를 어떻게 받아들이는지에 대한 의견

패널의 미래 전망 및 사회적 주제 논의

AI와 개발자의 역할 변화
- AI의 발전이 UI 개발자에게 미칠 영향에 대해 토론
- 미래를 대비하기 위한 스킬셋 추천, 예를 들어 인간 중심의 UX 설계

이번 매거진은 AI의 도움을 받아서 요약하긴 했지만, 그 전에 먼저 컨퍼런스 영상을 모두 시청하고 정리하느라 꽤 힘들었네요 🥲

열심히 작성한 글인만큼 주변에 많이 공유해주시면 너무 뿌듯할 것 같습니다ㅎㅎ

그럼 저는 다음에 또 유익한 글로 찾아뵙겠습니다!

지금까지 소플이었습니다. 감사합니다 😀

지금 가입하고 새로운 매거진을 이메일로 받아보세요!

목차

Keynote

Joe Savona

Lauren

Josh

Andrew

Sathya

Mofei

키노트 마무리

Vanilla React

React Router의 역사

Remix와 Shopify

Vanilla React와 프레임워크

React Router의 현황

Create React App의 현황

React Router V7

데모

결론

What's new in React 19

startTransition()에서 비동기 함수 사용 가능

UI 응답성 향상

Transition의 활용 사례

Action 및 useActionState() 훅

useFormStatus()

Optimistic UI 업데이트 (useOptimistic() 훅)

서버 컴포넌트의 도입

클라이언트 및 서버 기능의 구분

훅으로의 접근 제한 해소

Server Actions

ref as a prop (ref가 이제 prop이다!)

Document metadata

Stylesheet support

Preloading APIs

React Unpacked: A Roadmap to React 19

기본 앱 설명

현재 앱의 문제점

액션 API 소개: startTransition()

useTransition() 훅

form에서 Action 사용법

데이터 상태 관리: useActionState()

Optimistic UI 업데이트: useOptimistic()

서버 컴포넌트 통합

정리와 결론

Forget About Memo

서론

BlueSky 앱에 컴파일러 적용 시연

포스트 컨트롤 컴포넌트 분석

새로운 코드 추가

불필요한 렌더링 문제 식별 및 해결

모든 플랫폼에서의 작동

리액트 비전과 컴파일러

간편한 컴파일러 도입

Find and fix Rules of React issues

Estimate the effort

대규모 계산 최적화

결론

React for Two Computers

소개

서버와 클라이언트 관계

예제 소개 - 고양이 이름 생성기

비동기 문제

서버 코드 최적화

코드 단순화

컴포넌트 접근 방식

리액트 서버 컴포넌트 (RSC)

요약 및 결론

Introducing Universal React Server Components in Expo Router

소개

React Native의 시작과 현재

Expo Router 설명

데이터 페칭과 서버 렌더링 중요성

서버 기반 UI 접근의 어려움

Expo Router 목표

리액트 서버 컴포넌트 적용

모바일 앱에서 RSC 사용한 데모 시연

개발자 경험

전반적인 효과

향후 계획

Real-time server components

소개

`startTransition()`에서 비동기 함수 사용 가능

Action 및 `useActionState()` 훅

`useFormStatus()`

Optimistic UI 업데이트 (`useOptimistic()` 훅)

`ref` as a `prop` (`ref`가 이제 `prop`이다!)

액션 API 소개: `startTransition()`

`useTransition()` 훅

데이터 상태 관리: `useActionState()`

Optimistic UI 업데이트: `useOptimistic()`