![FEConf 2025 [B1] 스벨트를 통해 리액트 더 잘 이해하기](https://i.ytimg.com/vi/n01OIryG7kk/maxresdefault.jpg)
FEConf 2025 [B1] 스벨트를 통해 리액트 더 잘 이해하기
FEConf 2025 B트랙 · YouTube
AI 핵심 요약
리액트의 컴포넌트 단위 재실행과 최적화 부담을 이해하기 위해 스벨트의 파인그레인드 리액티비티(FGR)를 비교하고, 값이 사용된 부분만 갱신되는 원리를 설명했다. 이어 스벨트의 use directive처럼 DOM에 동작을 직접 연결하는 방식을 살펴보고, 리액트 19의 콜백 ref를 활용해 외부 클릭 감지 로직을 재사용하는 패턴을 제안했다. 스벨트의 내장 트랜지션과 커스텀 애니메이션에서 얻은 아이디어를 리액트의 DOM 생성·소멸 시점 제어에 적용하고, 이를 페이지 애니메이션 라이브러리 스고이로 확장한 사례도 소개했다. 다른 프레임워크의 설계 방식을 익히면 현재 사용하는 리액트의 동작과 선택을 더 깊이 이해하고 새로운 구현 방법을 찾을 수 있다는 것이 핵심이다.
- 파인그레인드 리액티비티는 값이 읽히는 시점에 의존성을 추적해 변경된 값에 연결된 이펙트만 실행한다.
- 리액트의 콜백 ref는 요소의 생성·소멸 시점에 로직을 연결할 수 있어 DOM 기능을 재사용하는 패턴으로 활용할 수 있다.
- 외부 클릭 감지처럼 DOM에 직접 붙는 동작은 훅으로 분리하되, 요소와 동작의 연결이 코드에서 드러나도록 구성한다.
- 요소가 사라질 때 애니메이션을 적용하려면 DOM 제거 시점을 제어해야 하며, 리액트에서는 콜백 ref를 활용한 구현을 고려할 수 있다.
소개
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 FEConf 2025 [B1] 스벨트를 통해 리액트 더 잘 이해하기 TRACK B-1 스벨트를 통해 리액트 더 잘 이해하기 문대승 | 피오유엘 (POUL) 프론트엔드 vs 리액트엔드: 당신은 어떤 개발자인가요? 다른 프레임워크를 배운다는 것은 오히려 현재 내가 쓰고 있는 도구를 잘 이해하는 길일 수 있습니다. 이번 발표에서는 스벨트에서 얻은 인사이트를 리액트에 접목할 수 있는지 소개하겠습니다.
비슷한 학습 자료
컨퍼런스 SLASH
토스ㅣSLASH 21 - 프론트엔드 웹 서비스에서 우아하게 비동기 처리하기
컨퍼런스 SLASH
API를 호출하거나 네이티브 앱과 통신할 때 프론트엔드 웹 서비스에서는 반드시 비동기 작업이 일어나게 됩니다. 일상처럼 다루고 있지만 정작 UI에서 다루기 힘든 비동기 프로그래밍. React Suspense를 이용하여 우아하게 처리하는 이론과 실전 적용법을 공유합니다. 박서진 / 토스 Frontend Developer 토스 개발자 컨퍼런스 SLASH에 대한 자세한 정보는 👉🏻 https://toss.im/slash-21 컨퍼런스 및 세션에 대한 문의는 👉🏻 slash@toss.im #토스 #개발자컨퍼런스 #SLASH
프론트엔드 로드맵 2개에 담김
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A1] 60 FPS in React Native
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 [A5] 프론트엔드에서 1,000만 개 데이터를 실시간으로 처리하라고요? WebGL2를 활용한 GPGPU의 세계로
컨퍼런스 FEConf 2025 A트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK A-5 프론트엔드에서 1,000만 개 데이터를 실시간으로 처리하라고요? WebGL2를 활용한 GPGPU의 세계로 김한슬마로 | Portrai Inc. AI 기술의 확산으로 산업 전반에서 데이터의 규모와 중요성이 급격히 커지고 있습니다. 이에 따라 백엔드뿐만 아니라 프론트엔드에서도, 브라우저 상에서 대규모 데이터를 실시간으로 분석하고 시각화하려는 요구가 빠르게 증가하고 있습니다. 이번 세션에서는 이러한 흐름에 맞춰, GPU 가속을 활용해 브라우저 내에서 데이터를 효과적으로 처리하는 기술을 소개합니다.
프론트엔드 컴퓨터 비전
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 [B3] 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성
컨퍼런스 FEConf 2025 B트랙
FEConf 2025 2025.8.23 11:00 ~ 17:40 세종대학교 광개토관 컨벤션센터 TRACK B-3 중요하지만 긴급하지 않은 일, 그럼에도 계획해야 하는 웹 접근성 김무훈 | A11YKR 커뮤니티 모든 사람을 위한 웹 접근성 지원과 설계, 제대로 알아봅시다. 웹 프런트엔드 서비스에서 접근성 지원은 여전히 제도적으로 의무화된 항공사 웹 서비스와 정부/공공기관 외에 모범 사례가 흔치 않고, 확실한 정답이 정해져 있지 않은 분야입니다. - 혹시 웹 접근성이 장애 사용자만을 위한 특수한 경험이라고 오해하고 계신가요? 웹의 본연의 힘은 보편성에 있습니다. 장애와 관계없이 모든 사람의 콘텐츠 접근은 필수적이라고 생각합니다. - 웹 접근성을 지원하기 위한 UI 컴포넌트 설계에 막연함을 느끼시나요? 웹 접근성 표준을 준수하면서, 일관된 UI 제어 경험을 어떻게 설계할 수 있는지 제가 고려했던 사항을 소개합니다. 따라서 아래 명제에 대한 발표자의 생각이 궁금하시면 꼭 보러 와주세...
프론트엔드 UI/UX
컨퍼런스 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, 큐샵과 같은 서비스에서도 사용하고 있습니다. 본 발표에선 그리드 기반 에디터에 대한 소개와 구현 전략, 구현 시 주의할 점에 대해 다룹니다.
웹 개발 프론트엔드