![FEConf 2025 [B2] 'memo'를 지울 결심 : React Compiler가 제안하는 미래](https://i.ytimg.com/vi/zrAGRppDkSw/maxresdefault.jpg)
FEConf 2025 [B2] 'memo'를 지울 결심 : React Compiler가 제안하는 미래
FEConf 2025 B트랙 · YouTube
AI 핵심 요약
React에서 불필요한 리렌더링을 막으려면 개발자가 `memo`, `useMemo`, `useCallback`을 직접 적용하고 의존성 배열을 관리해야 해 코드가 복잡해지는 문제가 있었다. 발표에서는 React Compiler가 Babel AST를 HIR 제어 흐름 그래프로 변환하고 SSA와 반응형 값 추적을 거쳐, 값의 변화에 영향을 받는 코드 영역을 자동으로 메모이제이션하는 과정을 설명했다. 이를 통해 부모 상태 변화와 무관한 자식 계산을 건너뛰는 등 수동 최적화 부담을 줄일 수 있지만, React 규칙을 어기면 잘못된 메모이제이션이 생길 수 있고 컴파일된 코드의 번들 크기가 늘어날 수 있다. 따라서 React의 규칙을 지키고 변화하는 값의 흐름을 이해하며, 컴파일러를 점진적으로 도입하는 것이 중요하다는 점을 강조했다.
- React Compiler는 컴포넌트의 제어 흐름과 값의 변화를 분석해 메모이제이션할 영역을 결정한다.
- 컴파일 과정에서는 Babel AST를 HIR 제어 흐름 그래프로 바꾸고, SSA 변환 등을 거쳐 값의 흐름을 추적한다.
- React의 순수성 및 훅 규칙을 지키고 ESLint로 위반을 점검해야 의도치 않은 메모이제이션을 줄일 수 있다.
- 컴파일된 코드의 번들 크기가 커질 수 있으므로 코드 스플리팅과 성능 이점을 함께 살펴야 한다.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-2 'memo'를 지울 결심 : React Compiler가 제안하는 미래 장용석 | 리멤버앤컴퍼니 Memoization을 위해 React 코드에서 흔히 사용되던 memo, useMemo와 이제는 헤어질 시간입니다. React Compiler가 어떻게 우리를 대신해 최적화를 수행하는지, 실제 React 코드가 어떻게 변화하는지 파이프라인을 따라 깊이 있게 살펴보고 앞으로 어떤 멘탈모델을 가지고 React 코드를 작성해야 할지 이야기해봅니다.
비슷한 학습 자료
컨퍼런스 DEVIEW 2023
하나의 코드로 React, Vue, Svelte 등 모든 프레임워크를 지원할 수 있는 CFCs Reactive
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A1] 60 FPS in React Native
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A2] 플러그인 시스템 기반의 유연한 React Native CodePush 대안
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A1] 60 FPS in React Native FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-2 플러그인 시스템 기반의 유연한 React Native CodePush 대안 강선규 | Toss RN Framework팀 App Center 종료 이후, React Native에서 벤더 종속 없이 OTA 업데이트를 적용할 수 있는 방법에 대해 이야기합니다. 기존 CodePush 방식의 한계를 극복하고, 플러그인 기반 아키텍처로 구성된 오픈소스 프로젝트 'hot-updater'를 소개드릴게요. 다양한 인프라—AWS, Supabase, Cloudflare, Firebase 등—와 유연하게 연동되는 구조와, 단일 명령어로 셀프 호스팅 가능한 업데이트 파이프라인을 어떻게 만들었는지 공유드리겠습니다.
모바일 앱 개발 데브옵스 · 인프라
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A4] 완전한 ZERO COST CSS-IN-JS, Devup-UI
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-4 완전한 ZERO COST CSS-IN-JS, Devup-UI 오정민 | ㈜데브파이브 정말 티끌 하나도 코스트가 없는 CSS-in-JS 라이브러리 Devup-UI! 그러면서 반응형, 선택자, 테마까지 많은 기능을 제공하는 Devup-UI는 어떻게 이런 성능과 기능들을 모두 제공할 수 있을까? Next.js 의 서버컴포넌트 도입으로 하락세를 겪고 있는 CSS-in-JS 라이브러리에 대한 완벽한 대안기능 구현에 대한 아이디어부터 Rust와 웹 어셈블리를 통하여 개발하게 된 개발기 그리고 실제 작동까지! 어떤 라이브러리 보다 효율적이고(심지어 Tailwind CSS보다도!) 성능 이슈가 전혀 없는 완벽한 해결법을 향한 여정을 공유드립니다.
웹 개발 프론트엔드
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B5] TanStack Query 너머를 향해! 쿼리를 라우트까지 전파시키기
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-5 TanStack Query 너머를 향해! 쿼리를 라우트까지 전파시키기 임상원 | 라프텔 TanStack Query에서 SSR 지원을 위해 수동으로 prefetchQuery를 관리하는 건 까다롭습니다. RSC와 Suspense만으로는 실패하기 쉬운데요. 여러 사례를 바탕으로 컴포넌트와 쿼리를 근처 두며 쉽게 prefetchQuery를 수행하는 방법론을 정리해 소개합니다. 나아가 이 방법론 위에 구성한 라이브러리 설계 과정을 공유합니다.
프론트엔드
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B6] 그리드 기반 웹 에디터 / 빌더 구현기
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-6 그리드 기반 웹 에디터 / 빌더 구현기 이선협 | 마플코퍼레이션 그리드 기반 에디터는 웹에 최적화된 자유도를 가진 에디터입니다. 이런 장점을 기반으로 노코드 웹사이트 제작, 사용자 정의 대시보드 등 다양한 제품에서 사용할 수 있습니다. 대표적으로 Squarespace, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.
웹 개발 프론트엔드