프론트엔드 뉴스레터
#06
이번 이슈 한눈에
- React Aria Sheet는 브라우저의 스크롤 제스처로 펼치거나 닫아요.
- React의 parent와 owner 관계를 한 그림에서 구분해요.
- Ink 8은 React 19.3 이상이 필요하고, 최소·최대 너비와 stream 타입이 바뀝니다.
- 01
react-aria.adobe.com
React Aria Sheet는 브라우저 스크롤 제스처로 펼치거나 닫아요
원문 읽기 ↗react-aria-components1.22.0에 브라우저의 스크롤 제스처를 사용하는 Sheet가 추가됐어요.snapPoints로 일부만 열린 상태를 지정하면 첫 snap point에서 열리고, 위로 밀어 완전히 펼치거나 아래로 밀어 닫을 수 있습니다.Sheet와SheetBackdrop의swipeAnimation에는 CSS keyframe 애니메이션 이름을 지정해요. 스와이프 제스처와 진입·퇴장 애니메이션에 맞춰 재생됩니다. - 02
julesblom.com
React의 parent와 owner 관계를 한 그림에 겹쳐 보여줘요
원문 읽기 ↗Jules Blom이 컴포넌트가 어디에 놓이는지와 누가 그 JSX를 만들었는지를 한 그림에 표시하는 표기법을 제안했어요.
children이나 다른 prop으로 JSX를 넘기면 parent와 owner가 달라지는데, 트리 위에 별도의 곡선을 그려 이 관계를 구분합니다.Context를 읽을 수 있는 범위는 parent tree를 따르고, props는 owner 관계를 따라 전달돼요. 같은 그림에서
Suspense의 fallback이 대체하는 범위와 Client Component의children으로 전달된 Server Component도 확인할 수 있습니다.- 시각화 도구는 아직 작고 선별된 예제에서 동작하는 단계입니다. 실제 대규모 코드베이스를 탐색하는 도구로 완성된 것은 아니에요.
- 03
github.com
Ink 8, 스크롤 영역을 추가하고 너비·stream 타입을 바꿨어요
원문 읽기 ↗Ink 8에서는
Box의contentOffsetX·contentOffsetY를overflow="hidden"과 함께 써서 스크롤 영역을 만들 수 있어요.incrementalRendering모드는 줄 전체를 다시 쓰지 않고 바뀌지 않은 앞부분을 건너뛰어 출력량과 깜빡임을 줄입니다. React 19.3 이상이 필요하며,@types/react를 사용하는 프로젝트에서는 타입 패키지도 19.3 이상으로 맞춰야 해요.Box의minWidth·maxWidth는 숫자만 받습니다. 퍼센트 문자열은 Yoga가 잘못된 조상을 기준으로 계산하던 문제 때문에 제외됐어요. 퍼센트 기반 최소·최대 너비가 필요하면useWindowSize()나 부모의useBoxMetrics()로 계산해야 합니다.width는 계속 퍼센트 문자열을 지원해요.render()와 stream hooks의 타입이 일반 Node.js stream으로 바뀌어stdout.columns같은 TTY 속성에 바로 접근할 수 없습니다. 화면 크기는 resize 때도 다시 렌더링하는useWindowSize()로 읽습니다.