성능 최적화, 이렇게 시작하니 쉬워졌습니다(React Server Component)

리액트 서버 컴포넌트란?

리액트 서버 컴포넌트는 클라이언트가 아닌 서버에서 렌더링되는 컴포넌트를 의미해요. 이 컴포넌트는 서버에서 데이터를 가져와 클라이언트에 전달하기 때문에, 초기 로딩 속도가 빨라지고 사용자 경험이 개선되는 효과가 있죠. 서버에서 렌더링된 컴포넌트는 클라이언트로 전달되는 JS 코드의 양을 줄여주기 때문에, 번들 사이즈를 줄이는 데 큰 도움이 돼요.

예를 들어, 서버 컴포넌트를 사용하면 클라이언트의 JS 번들이 4.65K바이트에서 3.3K바이트로 줄어들 수 있죠. 이는 사용자에게 더 빠른 로딩 시간을 제공하고, 전반적인 성능을 개선하는 데 기여해요. 따라서 리액트에서 서버 컴포넌트를 도입하는 것은 성능 최적화의 첫 걸음이 될 수 있습니다.

JS 번들 사이즈 줄이기

JS 번들 사이즈를 줄이는 방법은 여러 가지가 있지만, 리액트 서버 컴포넌트를 활용하는 것이 가장 효과적이에요. 성능 최적화를 위해서는 두 가지 기준을 기억해야 해요. 첫 번째는, 가능한 한 하위 컴포넌트에서 use client를 선언하는 것이고, 두 번째는 이벤트 핸들러와 훅을 사용하는 컴포넌트는 클라이언트 컴포넌트로 남겨야 한다는 거예요.

예를 들어, 어사인 리스트 컴포넌트를 서버 컴포넌트로 만들고, 이벤트 핸들러가 필요한 아이템 컴포넌트만 클라이언트 컴포넌트로 남기는 방식으로 리팩토링할 수 있어요. 이렇게 하면 불필요한 코드가 클라이언트 쪽으로 전달되지 않으므로, 번들 사이즈를 줄일 수 있죠.

리팩토링 전후의 번들 사이즈를 비교해보면, 성능의 차이를 쉽게 확인할 수 있어요. 초기 번들이 4.65K였던 것이 리팩토링 후 3.3K로 줄어들면서, 페이지 로딩 속도와 성능이 개선된 걸 확인할 수 있답니다.

리팩토링 과정과 실전 팁

리팩토링 과정은 생각보다 간단해요. 우선, 이벤트 핸들러가 필요한 컴포넌트를 식별하고, 이를 하위 컴포넌트로 이동시키는 작업을 진행해요. 예를 들어, 어사인 리스트 컴포넌트에서 아이템 컴포넌트로 클릭 이벤트 핸들러를 이동시켜야 해요.

이 과정에서 중요한 점은 상태 관리를 URL로 처리하는 것인데요. 이렇게 하면 글로벌 상태를 사용하지 않고도 컴포넌트 간의 데이터를 쉽게 공유할 수 있어요. URL 쿼리 파라미터를 활용해 선택된 아이디를 관리하면, 상태가 없기 때문에 서버 컴포넌트로 만들기 쉬워지는 거죠.

리팩토링을 완료한 후에는 next.config.js 파일을 수정하여 번들 분석 도구를 설정해주면, 최적화된 번들의 사이즈를 확인할 수 있어요. 이렇게 최적화가 완료된 후, 실제로 페이지를 테스트해보면 성능 개선을 체감할 수 있을 거예요.