"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { code: "code", h2: "h2", img: "img", p: "p", pre: "pre", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h2, { id: "들어가며", children: "들어가며" }), "\n", _jsx(_components.p, { children: "채팅 앱을 개발하고 있었다." }), "\n", _jsx(_components.p, { children: "메시지 목록, 입력창, 연결 상태 표시가 있는 화면이다. Zustand로 상태 관리를 했다. 로컬에서는 괜찮았는데, 메시지가 100개를 넘어가면서 타이핑이 버벅거리기 시작했다." }), "\n", _jsx(_components.p, { children: "DevTools Profiler를 켜봤다. 키 하나를 누를 때마다 메시지 목록 전체가 리렌더링되고 있었다. 입력창에 글자를 치는데 왜 메시지 목록이 다시 그려지는 걸까?" }), "\n", _jsx(_components.h2, { id: "전체-구독의-함정", children: "전체 구독의 함정" }), "\n", _jsx(_components.p, { children: "원인은 Store 구독 방식에 있었다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function ChatPage() {\n const { messages, input, setInput, isConnected } = useChatStore();\n\n return (\n

\n \n \n \n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["이 코드는 Store의 모든 상태를 구독한다. ", _jsx(_components.code, { children: "input" }), "이 바뀌면 ", _jsx(_components.code, { children: "ChatPage" }), "가 리렌더링된다. ", _jsx(_components.code, { children: "ChatPage" }), "가 리렌더링되면 자식 컴포넌트들도 전부 리렌더링된다. ", _jsx(_components.code, { children: "MessageList" }), "는 ", _jsx(_components.code, { children: "messages" }), "가 그대로인데도 다시 그려진다."] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://brewlo-blog-images.s3.ap-northeast-2.amazonaws.com/images/2026/02/03/2126d447-7ac5-40d2-ac9d-e001118c237d.png", alt: "" }) }), "\n", _jsxs(_components.p, { children: ["Zustand의 기본 동작을 이해해야 한다. ", _jsx(_components.code, { children: "useChatStore()" }), "를 호출하면 Store 전체를 구독한다. Store의 어떤 상태든 바뀌면 이 컴포넌트는 리렌더링된다. ", _jsx(_components.code, { children: "input" }), "이 바뀌든, ", _jsx(_components.code, { children: "messages" }), "가 바뀌든, ", _jsx(_components.code, { children: "isConnected" }), "가 바뀌든 상관없다."] }), "\n", _jsx(_components.h2, { id: "useshallow로-구독-범위-좁히기", children: "useShallow로 구독 범위 좁히기" }), "\n", _jsxs(_components.p, { children: ["해결책은 필요한 상태만 구독하는 거다. Zustand의 ", _jsx(_components.code, { children: "useShallow" }), "를 쓰면 된다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "import { useShallow } from \"zustand/react/shallow\";\n\nfunction MessageList() {\n const messages = useChatStore(\n useShallow((state) => state.messages)\n );\n\n return messages.map((msg) => );\n}\n\nfunction InputArea() {\n const { input, setInput } = useChatStore(\n useShallow((state) => ({\n input: state.input,\n setInput: state.setInput,\n }))\n );\n\n return setInput(e.target.value)} />;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["이제 ", _jsx(_components.code, { children: "MessageList" }), "는 ", _jsx(_components.code, { children: "messages" }), "만 구독한다. ", _jsx(_components.code, { children: "input" }), "이 바뀌어도 ", _jsx(_components.code, { children: "MessageList" }), "는 리렌더링되지 않는다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "InputArea" }), "는 ", _jsx(_components.code, { children: "input" }), "만 구독한다. ", _jsx(_components.code, { children: "messages" }), "가 추가되어도 ", _jsx(_components.code, { children: "InputArea" }), "는 그대로다."] }), "\n", _jsx(_components.p, { children: "컴포넌트 분리도 함께 했다. 상태별로 컴포넌트를 나누면 리렌더링 범위가 자연스럽게 격리된다." }), "\n", _jsx(_components.h2, { id: "selector에서-새-객체를-만들면-안-되는-이유", children: "selector에서 새 객체를 만들면 안 되는 이유" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useShallow" }), "를 쓸 때 흔히 하는 실수가 있다. selector 안에서 새 배열이나 객체를 만드는 거다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// 매 렌더링마다 새 배열이 생성된다\nconst userMessages = useChatStore(\n useShallow((state) => state.messages.filter((m) => m.role === \"user\")),\n);\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "filter" }), "는 항상 새 배열을 반환한다. ", _jsx(_components.code, { children: "useShallow" }), "는 얕은 비교를 하는데, 배열 참조가 매번 바뀌니까 비교에서 걸린다. 결국 리렌더링이 발생한다."] }), "\n", _jsxs(_components.p, { children: ["파생 데이터는 ", _jsx(_components.code, { children: "useMemo" }), "와 조합해야 한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function UserMessageList() {\n const messages = useChatStore(\n useShallow((state) => state.messages)\n );\n\n const userMessages = useMemo(\n () => messages.filter((m) => m.role === \"user\"),\n [messages]\n );\n\n return userMessages.map((msg) => );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["selector에서는 원본 데이터만 가져오고, 필터링이나 변환은 ", _jsx(_components.code, { children: "useMemo" }), "에서 한다. ", _jsx(_components.code, { children: "messages" }), " 참조가 바뀔 때만 필터링이 다시 실행된다."] }), "\n", _jsx(_components.h2, { id: "리스트-아이템의-불필요한-리렌더링", children: "리스트 아이템의 불필요한 리렌더링" }), "\n", _jsx(_components.p, { children: "메시지 목록에서 또 다른 문제가 있었다. 새 메시지가 하나 추가되면 기존 메시지 아이템들도 전부 리렌더링됐다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function MessageList({ messages }) {\n return (\n

\n {messages.map((msg) => (\n \n ))}\n

\n );\n}\n\nfunction MessageItem({ message }) {\n return

{message.content}

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "MessageList" }), "가 리렌더링되면 ", _jsx(_components.code, { children: "map" }), " 안의 모든 ", _jsx(_components.code, { children: "MessageItem" }), "이 다시 생성된다. 기존 메시지들은 바뀐 게 없는데도 말이다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "React.memo" }), "로 컴포넌트를 감싸면 된다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "const MessageItem = memo(function MessageItem({ message }) {\n return

{message.content}

;\n});\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "memo" }), "로 감싸면 props가 바뀔 때만 리렌더링된다. 기존 메시지의 ", _jsx(_components.code, { children: "message" }), " prop은 그대로니까 리렌더링을 건너뛴다."] }), "\n", _jsx(_components.h2, { id: "함수-props와-usecallback", children: "함수 props와 useCallback" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "memo" }), "를 적용했는데도 리렌더링이 발생하는 경우가 있다. 함수를 props로 넘길 때다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function Chat() {\n const sendMessage = useChatStore((state) => state.sendMessage);\n\n const handleSend = (content) => {\n sendMessage(content);\n };\n\n return ;\n}\n\nconst MessageInput = memo(function MessageInput({ onSend }) {\n // ...\n});\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "handleSend" }), "는 ", _jsx(_components.code, { children: "Chat" }), "이 렌더링될 때마다 새로 생성된다. 함수 참조가 바뀌니까 ", _jsx(_components.code, { children: "memo" }), "로 감싼 ", _jsx(_components.code, { children: "MessageInput" }), "도 리렌더링된다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useCallback" }), "으로 함수를 메모이제이션해야 한다."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "function Chat() {\n const sendMessage = useChatStore((state) => state.sendMessage);\n\n const handleSend = useCallback((content) => {\n sendMessage(content);\n }, [sendMessage]);\n\n return ;\n}\n" }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "sendMessage" }), "가 바뀌지 않으면 ", _jsx(_components.code, { children: "handleSend" }), "도 같은 참조를 유지한다. ", _jsx(_components.code, { children: "MessageInput" }), "은 리렌더링을 건너뛴다."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "useCallback" }), "은 ", _jsx(_components.code, { children: "memo" }), "와 함께 써야 의미가 있다. 자식 컴포넌트가 ", _jsx(_components.code, { children: "memo" }), "로 감싸져 있지 않으면 ", _jsx(_components.code, { children: "useCallback" }), "은 그냥 오버헤드다."] }), "\n", _jsx(_components.h2, { id: "고빈도-이벤트-throttle", children: "고빈도 이벤트 throttle" }), "\n", _jsx(_components.p, { children: "스크롤이나 리사이즈 이벤트를 처리할 때도 주의가 필요하다. 이 이벤트들은 초당 수십 번씩 발생한다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "useEffect(() => {\n const handleScroll = () => {\n setScrollPosition(window.scrollY);\n };\n\n window.addEventListener(\"scroll\", handleScroll);\n return () => window.removeEventListener(\"scroll\", handleScroll);\n}, []);\n" }) }), "\n", _jsxs(_components.p, { children: ["스크롤할 때마다 ", _jsx(_components.code, { children: "setScrollPosition" }), "이 호출되고, 컴포넌트가 리렌더링된다. 1초에 60번 이상 리렌더링이 발생할 수 있다."] }), "\n", _jsx(_components.p, { children: "throttle을 적용하면 된다." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "useEffect(() => {\n let timeoutId = null;\n\n const handleScroll = () => {\n if (timeoutId) return;\n\n timeoutId = setTimeout(() => {\n setScrollPosition(window.scrollY);\n timeoutId = null;\n }, 16); // ~60fps\n };\n\n window.addEventListener(\"scroll\", handleScroll);\n return () => {\n window.removeEventListener(\"scroll\", handleScroll);\n if (timeoutId) clearTimeout(timeoutId);\n };\n}, []);\n" }) }), "\n", _jsx(_components.p, { children: "16ms 간격으로 제한하면 60fps를 유지하면서 리렌더링 횟수를 크게 줄일 수 있다. 체감상 차이가 없으면서 CPU 사용량이 눈에 띄게 줄어든다." }), "\n", _jsx(_components.h2, { id: "정리", children: "정리" }), "\n", _jsxs(_components.p, { children: ["React 앱이 느려지는 가장 흔한 원인은 불필요한 리렌더링이다. Zustand를 쓴다면 ", _jsx(_components.code, { children: "useShallow" }), "로 필요한 상태만 구독하는 게 첫 번째다."] }), "\n", _jsxs(_components.p, { children: ["리스트 아이템은 ", _jsx(_components.code, { children: "memo" }), "로 감싸고, 함수 props는 ", _jsx(_components.code, { children: "useCallback" }), "과 함께 쓴다. 고빈도 이벤트는 throttle로 제어한다."] }), "\n", _jsx(_components.p, { children: "모든 컴포넌트에 최적화를 적용할 필요는 없다. DevTools Profiler로 느린 구간을 찾고, 거기에만 집중하는 게 효율적이다." }), "\n", _jsx(_components.p, { children: "채팅 앱의 경우 타이핑할 때 메시지 목록이 리렌더링되지 않도록 구독 범위를 좁히는 것만으로 체감 성능이 확 달라지는 경험을 할 수 있었다" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };