[React 19] <Activity> 컴포넌트를 사용하여 conditional rendering의 문제를 해결하기

React에서 어떤 요소를 상황에 따라 보여주거나 숨길 때 어떤 방식을 사용하나요?

다음과 같이 조건부 렌더링을 하지 않으신가요?

return (
	<>
    	{isShowing && <Compenent/>
    	<>
)

저도 위와 같은 방법을 많이 사용합니다,

그런데 위와 같은 방법은 시나리오에 따라 문제가 발생할 소지가 있습니다.

 

기존  조건부 렌더링의 문제

기존 조건부 렌더링의 문제를 설명하기 위해 예시 코드를 작성해 봤습니다.

 

이 예시에서는 숫자를 증가시키거나 줄일 수 있는 카운터가 있고, 이 카운터를 토글 할 수 있는 버튼이 있습니다.

 

자식 컴포넌트의 상태가 유지되지 않습니다.

카운터를 열고, 숫자를 증가시키거나 감소 후에 카운터를 닫습니다.

다시 카운터를 열면 카운터는 기존에 내가 조작했던 숫자가 아닌, 0으로 초기화가 되었을 겁니다.

 

조건부 렌더링을 하면 자식 컴포넌트가 언마운트 후에 다시 마운트 되어서, 언마운트 되기 전에 가지고 있던 상태를 잃어버립니다.

 

display 속성으로 자식 컴포넌트의 상태 유지하기

그렇다면 자식 컴포넌트의 상태를 유지하려면 어떻게 해야 할까요?

 

컴포넌트 전체를 조건부로 렌더링 하지 않고 display 속성을 이용하면 됩니다.

 

위 예제와 같이 display 속성을 사용하여 조건부 렌더링을 하면  Counter 컴포넌트의 내부 상태는 유지됩니다.

 

위 방법의 문제

하지만 위 방법도 시나리오에 따라 문제가 발생할 수 있습니다.

위 방법은 display 속성을 통해 화면에서 안 보이는 것이지, 완전히 언마운트를 한 것이 아니기 때문에 clean up 함수가 작동하지 않습니다.

 

따라서 조건부 렌더링마다 clean up 함수의 실행이 필요한 시나리오 경우, 위의 방법은 적절하지 않습니다.

 

 

<Activity />

조건부 렌더링에서 컴포넌트의 상태를 유지하면서, clean up 함수의 호출이 필요한 시나리오 경우, 

React 19에서 도입 된 <Activity /> 컴포넌트를 사용하면 됩니다.

<Activity /> 컴포넌트는 display 속성을 사용해 조건부 렌더링을 하면서도 clean up 함수를 실행할 수 있게 해 줍니다.

 

<Activity /> 컴포넌트는 2개의 props를 가집니다

• children: 표시하거나 숨길 UI
• mode: 'visible' 또는 'hidden'입니다. 기본값은 'visible'입니다.

 

콘텐츠 사전 렌더링

<Activity /> 컴포넌트는 조건부 렌더링에 사용하는 것 외에 콘텐츠를 사전 렌더링 하는 데 사용할 수 있습니다.

 

<Activity />의 mode가 hidden인 상태에서는, 자식 컴포넌트는 페이지에 보이지 않지만 여전히 렌더링 됩니다.

이때, 보이는 콘텐츠보다 낮은 우선순위로 렌더링 되며, Effect는 마운트 되지 않습니다.

 

이러한 특성을 통해 자식 컴포넌트가 필요한 코드나 데이터를 미리 로드할 수 있습니다.

 

상호작용 속도 높이기

<Activity />를 사용하여 상호작용의 속도를 높일 수도 있습니다.

<Suspense /> 를 사용하여 상호작용 속도를 높일 수도 있지만,

<Suspense />는 UI가 변경되기 때문에 UI 변경을 원치 않는 경우 <Activity />를 사용하는 것이 방법이 될 수 있습니다.

 

https://ko.react.dev/reference/react/Activity#speeding-up-interactions-during-page-load

<Activity> – React

 

 

참고한 자료

https://ko.react.dev/reference/react/Activity

<Activity> – React

https://www.youtube.com/watch?v=IiGIoi8esXY&list=LL&index=3