리액트 19.2에서 새로 추가된 Activity 컴포넌트

[dev-hobin]

// Before
{isVisible && <Page />}

// After
<Activity mode={isVisible ? 'visible' : 'hidden'}>
  <Page />
</Activity>

위의 코드 예시를 보며 왜 이런걸 만든거지? 별로인거 같은데?? 라는 생각이 먼저 들었다. 그래서 Activity 문서를 읽어봤고 나름 괜찮다는 생각을 했다.

프리패치 기능이 컴포넌트화 된 느낌이랄까?

• Activity로 묶인 컴포넌트는 hidden 상태가 되더라도 내부 상태가 리셋되지 않는다.
  이건 유지시켜주고 싶은 상태를 상위 컴포넌트에서 따로 관리하거나 상태를 끌어올려야할 필요를 없애준다.
• 렌더링이 비싼 컴포넌트를 미리 렌더링 시켜둘 수 있다
  사용자에게 그 비싼 과정을 기다리게 할 필요 없다.
• 리액트는 내부적으로 선택적 하이드레이션이라는 성능 최적화 기능을 포함하고 있는데, Suspense 경계는 이 기능에 참여하며 컴포넌트 트리를 독립적인 단위로 분리시킨다. Activity 또한 그렇다. 그러니까.. 다시 표현하면 Activty 경계인 것이다.

좀 아쉬웠던건 hidden 모드일 때 display: none !important 로 css 를 건드리던데, 트랜지션을 줄 수가 없는게 아쉽다. (트랜지션 주는 방법은 있던데 ViewTransition 이라는 아직은 실험적인 컴포넌트와 함께 활용하면 줄 수 있다.)

Activity 는 적극적으로 사용되기 보다는 useDeferredValue, useTransition 처럼 성능 최적화를 위해 선택적으로 사용해야 하는 컴포넌트라고 생각했다.

[yongsk0066]

지나가다 남겨봅니다 오늘 있었던 키노트 영상을 보시면 좀더 도움이 되실 것 같아요.
https://www.youtube.com/live/zyVRg2QR6LA?si=8M3YvvHTMJue6Wku&t=1795
스케쥴링 관점에서 바라보는 편이 좀더 직관적일 수 있습니다

네이밍 자체는 안드로이드의 Activites 의 영향을 받았다고 합니다 https://developer.android.com/guide/components/activities/intro-activities?hl=ko

[hazzzi]

오 좋은 정보 감사합니다. Activity 이름의 유래가 궁금했는데 링크 남겨주셔서 감사해요 👍

[yoonminsang]

확실히 css가 좀 아쉽긴하네요..
hidden일 때 스타일을 커스텀할수있으면 좋을것같네요ㅠ