'알아서 렌더'에 맡겼다가 요청이 12배 늘어난 이야기

화면을 여러 조각으로 나눠 각 컴포넌트에 "필요한 건 알아서 가져와"라고 맡겨 본 적 없나요? 편해 보이지만, 알아서 맡긴다는 건 결국 각 조각이 저마다의 기본값을 고른다는 뜻이에요. 그리고 기본값은 보통 가장 안전하고 가장 무거운 쪽입니다.

여러 갈래로 퍼뜨리면 비용도 갈래마다 붙어요

목록 화면을 카드 컴포넌트로 잘게 나누고, 각 카드가 스스로 데이터를 부르게 짰던 적이 있어요. 한 카드씩 보면 깔끔한데, 카드 12개가 한 화면에 뜨면 요청도 12번 나가요. 이게 fan-out입니다. 하나를 여러 갈래로 퍼뜨리는 순간, 각 갈래가 알아서 고른 선택이 전부 합산돼요.

돌려 보니 네트워크 탭이 동일한 엔드포인트 호출로 가득 찼어요. 카드는 "나는 내 데이터만 부른다"는 정직한 판단을 했을 뿐인데, 화면 전체로 보면 같은 데이터를 12번 긁어온 셈이죠.

카드마다 각자 fetch→부모에서 1회 fetch→props로 12개에 분배

기본값은 '가장 크게'로 기울어 있어요

이미지도 같은 함정이 있었어요. 이미지 컴포넌트에 크기를 안 적으면 원본을 그대로 내려요. 썸네일 자리엔 320px면 충분한데, 2MB짜리 원본이 12장 그대로 내려오면 첫 화면이 무거워질 수밖에 없어요.

리스트도 마찬가지예요. 500개짜리 배열을 화면에 다 그리라고 하면, 뷰포트 밖 요소까지 전부 DOM에 올라가요. "알아서 다 그려"가 곧 "가장 비싼 방식으로 그려"가 되는 거죠.

화면 단위로 명시하면 정리돼요

해결은 단순했어요. 판단을 각 조각에 흩뿌리지 않고, 화면 단위로 위에서 한 번 정하는 거예요.

• 데이터는 부모에서 1회 부르고 props로 나눠 줬더니 요청이 12번에서 1번으로 줄었어요.
• 이미지엔 width·height를 직접 적어 썸네일은 320px로 고정했어요.
• 긴 목록은 화면에 보이는 만큼만 그리도록 가상화를 적용해 봤더니 초기 렌더가 눈에 띄게 가벼워졌어요.

플랜씨(plan-c) 금융계산기 화면을 직접 만들어 보니, 입력이 바뀔 때마다 각 결과 카드가 알아서 다시 계산하게 두는 것보다, 계산은 한 곳에서 하고 카드는 값만 받아 표시하는 쪽이 훨씬 예측 가능했어요. 로그인 없이 쓰는 도구라 첫 로딩이 특히 중요했고요.

• ✓기본값 먼저 확인
• ✓판단은 화면 단위로
• ✓네트워크 탭으로 검증

정리하며

"알아서 골라"는 편한 말이지만, 편함의 비용은 갈래 수만큼 곱해져요. 새 컴포넌트를 붙일 때 한 번씩 물어봐요. 이 조각은 무슨 기본값을 고르고 있고, 화면에 12개가 뜨면 어떻게 될까. 판단을 위로 한 단계만 끌어올리면, 요청도 렌더링도 훨씬 조용해집니다.