[{"data":1,"prerenderedAt":1918},["ShallowReactive",2],{"nav-global-ko":3,"doc-/develop/frameworks/react/react-performance-optimization":271,"nav-ko":1834,"surround-/develop/frameworks/react/react-performance-optimization":1915},[4,20,34,132,163,252],{"title":5,"path":6,"stem":7,"children":8,"page":19},"Plan","/plan","1.plan",[9,14],{"title":10,"path":11,"stem":12,"icon":13},"Planning","/plan/_dir","1.plan/_dir","i-heroicons-clipboard-document-list",{"title":15,"path":16,"stem":17,"icon":18},"프로젝트 로드맵 작성 가이드","/plan/project-roadmap","1.plan/project-roadmap","i-heroicons-map",false,{"title":21,"path":22,"stem":23,"children":24,"page":19},"Design","/design","2.design",[25,30],{"title":26,"path":27,"stem":28,"icon":29},"디자인 시스템 구축 가이드","/design/design-system-guide","2.design/1.design-system-guide","i-heroicons-book-open",{"title":21,"path":31,"stem":32,"icon":33},"/design/_dir","2.design/_dir","i-vscode-icons-file-type-design",{"title":35,"path":36,"stem":37,"children":38,"page":19},"Develop","/develop","3.develop",[39,53,74,128],{"title":40,"path":41,"stem":42,"children":43,"page":19},"Markdown","/develop/markdown","3.develop/0.markdown",[44,50],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},"MarkDown","/develop/markdown/_dir","3.develop/0.markdown/_dir","/develop/markdown/markdown","i-vscode-icons-file-type-markdown",{"title":51,"path":48,"stem":52,"icon":49},"Markdown 필수 문법 완전 정복","3.develop/0.markdown/markdown",{"title":54,"path":55,"stem":56,"children":57,"page":19},"Html","/develop/html","3.develop/1.html",[58,71],{"title":59,"path":60,"stem":61,"children":62,"page":19},"References","/develop/html/references","3.develop/1.html/1.references",[63,67],{"title":59,"path":64,"stem":65,"icon":66},"/develop/html/references/_dir","3.develop/1.html/1.references/_dir","i-vscode-icons-file-type-html",{"title":68,"path":69,"stem":70,"icon":66},"HTML이란?","/develop/html/references/html","3.develop/1.html/1.references/html",{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},"/develop/html/_dir","3.develop/1.html/_dir",{"title":75,"path":76,"stem":77,"children":78,"page":19},"Frameworks","/develop/frameworks","3.develop/2.frameworks",[79,88,101,114,124],{"title":80,"path":81,"stem":82,"children":83,"page":19},"Vue","/develop/frameworks/vue","3.develop/2.frameworks/1.vue",[84],{"title":80,"path":85,"stem":86,"icon":87},"/develop/frameworks/vue/_dir","3.develop/2.frameworks/1.vue/_dir","i-logos-vue",{"title":89,"path":90,"stem":91,"children":92,"page":19},"React","/develop/frameworks/react","3.develop/2.frameworks/2.react",[93,97],{"title":89,"path":94,"stem":95,"icon":96},"/develop/frameworks/react/_dir","3.develop/2.frameworks/2.react/_dir","i-logos-react",{"title":98,"path":99,"stem":100,"icon":96},"React 애플리케이션 성능 최적화 기법","/develop/frameworks/react/react-performance-optimization","3.develop/2.frameworks/2.react/react-performance-optimization",{"title":102,"path":103,"stem":104,"children":105,"page":19},"Nuxt","/develop/frameworks/nuxt","3.develop/2.frameworks/3.nuxt",[106,110],{"title":102,"path":107,"stem":108,"icon":109},"/develop/frameworks/nuxt/_dir","3.develop/2.frameworks/3.nuxt/_dir","i-logos-nuxt-icon",{"title":111,"path":112,"stem":113,"icon":87},"Nuxt 3 시작하기 가이드","/develop/frameworks/nuxt/nuxt3-intro-guide","3.develop/2.frameworks/3.nuxt/nuxt3-intro-guide",{"title":115,"path":116,"stem":117,"children":118,"page":19},"Next","/develop/frameworks/next","3.develop/2.frameworks/4.next",[119],{"title":120,"path":121,"stem":122,"icon":123},"Next.js","/develop/frameworks/next/_dir","3.develop/2.frameworks/4.next/_dir","i-logos-nextjs-icon",{"title":75,"path":125,"stem":126,"icon":127},"/develop/frameworks/_dir","3.develop/2.frameworks/_dir","i-heroicons-code-bracket-square",{"title":129,"path":130,"stem":131,"icon":127},"Development","/develop/_dir","3.develop/_dir",{"title":133,"path":134,"stem":135,"children":136,"page":19},"Devops","/devops","4.devops",[137,159],{"title":138,"path":139,"stem":140,"children":141,"icon":143},"Operation System 설정","/devops/os","4.devops/1.os/index",[142,144,154],{"title":138,"path":139,"stem":140,"icon":143},"i-heroicons-cog-8-tooth",{"title":145,"path":146,"stem":147,"children":148,"page":19},"Linux","/devops/os/linux","4.devops/1.os/1.linux",[149],{"title":150,"path":151,"stem":152,"icon":153},"운영 체제 비교 - 윈도우, 리눅스, 맥OS","/devops/os/linux/windows_linux_macos","4.devops/1.os/1.linux/windows_linux_macOS","i-logos-linux-tux",{"title":155,"path":156,"stem":157,"icon":158},"OS","/devops/os/_dir","4.devops/1.os/_dir","i-vscode-icons-folder-type-tools",{"title":160,"path":161,"stem":162,"icon":158},"Env","/devops/_dir","4.devops/_dir",{"title":164,"path":165,"stem":166,"children":167,"page":19},"Ai","/ai","5.ai",[168,192,247],{"title":169,"path":170,"stem":171,"children":172,"page":19},"Prompt","/ai/prompt","5.ai/3.prompt",[173],{"title":174,"path":175,"stem":176,"children":177,"page":19},"Claude","/ai/prompt/claude","5.ai/3.prompt/1.claude",[178],{"title":179,"path":180,"stem":181,"children":182,"page":19},"Claude Code","/ai/prompt/claude/claude-code","5.ai/3.prompt/1.claude/claude-code",[183,187],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},"/ai/prompt/claude/claude-code/_dir","5.ai/3.prompt/1.claude/claude-code/_dir","i-logos-anthropic-icon",{"title":188,"path":189,"stem":190,"icon":191},"Claude Code MCP 서버 자동 실행 설정","/ai/prompt/claude/claude-code/mcp-server-autostart-configuration","5.ai/3.prompt/1.claude/claude-code/mcp-server-autostart-configuration","i-heroicons-server",{"title":193,"path":194,"stem":195,"children":196,"page":19},"Personas","/ai/personas","5.ai/4.personas",[197,202,206,210,214,218,222,226,230,234,238,242],{"title":198,"path":199,"stem":200,"icon":201},"🏗️ System Architect 페르소나","/ai/personas/01-system-architect","5.ai/4.personas/01-system-architect","i-heroicons-cpu-chip",{"title":203,"path":204,"stem":205},"🎨 ui-accessibility-expert persona","/ai/personas/02-ui-accessibility-expert","5.ai/4.personas/02-ui-accessibility-expert",{"title":207,"path":208,"stem":209},"⚙️ Backend API Infrastructure Specialist Persona","/ai/personas/03-backend-api-infrastructure","5.ai/4.personas/03-backend-api-infrastructure",{"title":211,"path":212,"stem":213},"🛡️ Security Threat Modeling Expert System Prompt","/ai/personas/04-security-threat-modeling-expert","5.ai/4.personas/04-security-threat-modeling-expert",{"title":215,"path":216,"stem":217},"⚡ Performance-Optimizer AI Assist Prompt","/ai/personas/05-performance-optimizer","5.ai/4.personas/05-performance-optimizer",{"title":219,"path":220,"stem":221},"🔍 Root Cause Analyzer AI Persona Prompt","/ai/personas/11-root-cause-analyzer","5.ai/4.personas/11-root-cause-analyzer",{"title":223,"path":224,"stem":225},"🧪 QA Testing Expert AI Assistant Prompt","/ai/personas/12-quality-assurance-testing-expert","5.ai/4.personas/12-quality-assurance-testing-expert",{"title":227,"path":228,"stem":229},"🔄 Code Refactoring Specialist AI Assistant Prompt","/ai/personas/13-code-refactoring-specialist","5.ai/4.personas/13-code-refactoring-specialist",{"title":231,"path":232,"stem":233},"🚀 DevOps Infrastructure Expert AI Assistant Prompt","/ai/personas/14-infra-automation-expert","5.ai/4.personas/14-infra-automation-expert",{"title":235,"path":236,"stem":237},"👨‍🏫 Educational-Guidance-Mentor Persona System Prompt","/ai/personas/21-educational-guidance-mentor","5.ai/4.personas/21-educational-guidance-mentor",{"title":239,"path":240,"stem":241},"✍️ Documentation Expert AI Assistant Prompt","/ai/personas/22-technical-documentation-expert","5.ai/4.personas/22-technical-documentation-expert",{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},"AI Personas","/ai/personas/_dir","5.ai/4.personas/_dir","i-heroicons-users",{"title":248,"path":249,"stem":250,"icon":251},"AI","/ai/_dir","5.ai/_dir","i-heroicons-sparkles",{"title":253,"path":254,"stem":255,"children":256,"page":19},"Blog","/blog","6.blog",[257,267],{"title":258,"path":259,"stem":260,"children":261,"page":19},"2024","/blog/2024","6.blog/2024",[262],{"title":263,"path":264,"stem":265,"icon":266},"기록의 중요성","/blog/2024/2024-02-15-blog","6.blog/2024/2024-02-15-blog","i-heroicons-pencil-square",{"title":253,"path":268,"stem":269,"icon":270},"/blog/_dir","6.blog/_dir","i-heroicons-newspaper",{"id":272,"title":98,"authors":273,"body":274,"description":1825,"draft":19,"extension":1826,"head":273,"icon":273,"image":1827,"meta":1828,"navigation":1830,"path":99,"publishedAt":273,"seo":1831,"stem":100,"tags":273,"updatedAt":1832,"__hash__":1833},"docs_ko/3.develop/2.frameworks/2.react/react-performance-optimization.md",null,{"type":275,"value":276,"toc":1800},"minimark",[277,281,286,291,294,358,361,462,466,469,554,558,562,565,723,727,730,1019,1023,1027,1030,1034,1037,1201,1205,1208,1408,1412,1416,1419,1527,1531,1534,1646,1650,1654,1657,1661,1664,1668,1671,1791,1794,1797],[278,279,280],"p",{},"React는 강력한 프론트엔드 라이브러리지만, 애플리케이션의 규모가 커지면 성능 이슈가 발생할 수 있습니다. 이 문서에서는 React 애플리케이션의 성능을 최적화하는 다양한 기법과 전략을 살펴봅니다.",[282,283,285],"h2",{"id":284},"불필요한-리렌더링-방지","불필요한 리렌더링 방지",[287,288,290],"h3",{"id":289},"reactmemo-활용","React.memo 활용",[278,292,293],{},"컴포넌트의 props가 변경되지 않았을 때 리렌더링을 방지합니다.",[295,296,301],"pre",{"className":297,"code":298,"language":299,"meta":300,"style":300},"language-jsx shiki shiki-themes github-light github-dark","const MyComponent = React.memo(function MyComponent(props) {\n  /* 렌더링 로직 */\n});\n","jsx","",[302,303,304,345,352],"code",{"__ignoreMap":300},[305,306,309,313,317,320,324,328,331,334,336,338,342],"span",{"class":307,"line":308},"line",1,[305,310,312],{"class":311},"szBVR","const",[305,314,316],{"class":315},"sj4cs"," MyComponent",[305,318,319],{"class":311}," =",[305,321,323],{"class":322},"sVt8B"," React.",[305,325,327],{"class":326},"sScJk","memo",[305,329,330],{"class":322},"(",[305,332,333],{"class":311},"function",[305,335,316],{"class":326},[305,337,330],{"class":322},[305,339,341],{"class":340},"s4XuR","props",[305,343,344],{"class":322},") {\n",[305,346,348],{"class":307,"line":347},2,[305,349,351],{"class":350},"sJ8bj","  /* 렌더링 로직 */\n",[305,353,355],{"class":307,"line":354},3,[305,356,357],{"class":322},"});\n",[278,359,360],{},"특정 props만 비교하고 싶다면 두 번째 인자에 커스텀 비교 함수를 전달할 수 있습니다:",[295,362,364],{"className":297,"code":363,"language":299,"meta":300,"style":300},"const MyComponent = React.memo(\n  function MyComponent(props) {\n    /* 렌더링 로직 */\n  },\n  (prevProps, nextProps) => {\n    // true를 반환하면 리렌더링을 방지합니다\n    return prevProps.id === nextProps.id;\n  }\n);\n",[302,365,366,381,394,399,405,429,435,450,456],{"__ignoreMap":300},[305,367,368,370,372,374,376,378],{"class":307,"line":308},[305,369,312],{"class":311},[305,371,316],{"class":315},[305,373,319],{"class":311},[305,375,323],{"class":322},[305,377,327],{"class":326},[305,379,380],{"class":322},"(\n",[305,382,383,386,388,390,392],{"class":307,"line":347},[305,384,385],{"class":311},"  function",[305,387,316],{"class":326},[305,389,330],{"class":322},[305,391,341],{"class":340},[305,393,344],{"class":322},[305,395,396],{"class":307,"line":354},[305,397,398],{"class":350},"    /* 렌더링 로직 */\n",[305,400,402],{"class":307,"line":401},4,[305,403,404],{"class":322},"  },\n",[305,406,408,411,414,417,420,423,426],{"class":307,"line":407},5,[305,409,410],{"class":322},"  (",[305,412,413],{"class":340},"prevProps",[305,415,416],{"class":322},", ",[305,418,419],{"class":340},"nextProps",[305,421,422],{"class":322},") ",[305,424,425],{"class":311},"=>",[305,427,428],{"class":322}," {\n",[305,430,432],{"class":307,"line":431},6,[305,433,434],{"class":350},"    // true를 반환하면 리렌더링을 방지합니다\n",[305,436,438,441,444,447],{"class":307,"line":437},7,[305,439,440],{"class":311},"    return",[305,442,443],{"class":322}," prevProps.id ",[305,445,446],{"class":311},"===",[305,448,449],{"class":322}," nextProps.id;\n",[305,451,453],{"class":307,"line":452},8,[305,454,455],{"class":322},"  }\n",[305,457,459],{"class":307,"line":458},9,[305,460,461],{"class":322},");\n",[287,463,465],{"id":464},"usememo와-usecallback-활용","useMemo와 useCallback 활용",[278,467,468],{},"계산 비용이 많이 드는 연산이나 자식 컴포넌트에 전달되는 함수를 메모이제이션합니다.",[295,470,472],{"className":297,"code":471,"language":299,"meta":300,"style":300},"// 계산 비용이 많이 드는 값 메모이제이션\nconst memoizedValue = useMemo(() => {\n  return computeExpensiveValue(a, b);\n}, [a, b]);\n\n// 자식 컴포넌트에 전달되는 함수 메모이제이션\nconst memoizedCallback = useCallback(() => {\n  doSomething(a, b);\n}, [a, b]);\n",[302,473,474,479,498,509,514,520,525,543,550],{"__ignoreMap":300},[305,475,476],{"class":307,"line":308},[305,477,478],{"class":350},"// 계산 비용이 많이 드는 값 메모이제이션\n",[305,480,481,483,486,488,491,494,496],{"class":307,"line":347},[305,482,312],{"class":311},[305,484,485],{"class":315}," memoizedValue",[305,487,319],{"class":311},[305,489,490],{"class":326}," useMemo",[305,492,493],{"class":322},"(() ",[305,495,425],{"class":311},[305,497,428],{"class":322},[305,499,500,503,506],{"class":307,"line":354},[305,501,502],{"class":311},"  return",[305,504,505],{"class":326}," computeExpensiveValue",[305,507,508],{"class":322},"(a, b);\n",[305,510,511],{"class":307,"line":401},[305,512,513],{"class":322},"}, [a, b]);\n",[305,515,516],{"class":307,"line":407},[305,517,519],{"emptyLinePlaceholder":518},true,"\n",[305,521,522],{"class":307,"line":431},[305,523,524],{"class":350},"// 자식 컴포넌트에 전달되는 함수 메모이제이션\n",[305,526,527,529,532,534,537,539,541],{"class":307,"line":437},[305,528,312],{"class":311},[305,530,531],{"class":315}," memoizedCallback",[305,533,319],{"class":311},[305,535,536],{"class":326}," useCallback",[305,538,493],{"class":322},[305,540,425],{"class":311},[305,542,428],{"class":322},[305,544,545,548],{"class":307,"line":452},[305,546,547],{"class":326},"  doSomething",[305,549,508],{"class":322},[305,551,552],{"class":307,"line":458},[305,553,513],{"class":322},[282,555,557],{"id":556},"코드-분할-code-splitting","코드 분할 (Code Splitting)",[287,559,561],{"id":560},"reactlazy와-suspense-활용","React.lazy와 Suspense 활용",[278,563,564],{},"필요한 시점에 컴포넌트를 동적으로 로드합니다.",[295,566,568],{"className":297,"code":567,"language":299,"meta":300,"style":300},"import React, { Suspense } from 'react';\n\nconst LazyComponent = React.lazy(() => import('./LazyComponent'));\n\nfunction MyComponent() {\n  return (\n    \u003Cdiv>\n      \u003CSuspense fallback={\u003Cdiv>Loading...\u003C/div>}>\n        \u003CLazyComponent />\n      \u003C/Suspense>\n    \u003C/div>\n  );\n}\n",[302,569,570,588,592,621,625,634,641,653,680,691,701,711,717],{"__ignoreMap":300},[305,571,572,575,578,581,585],{"class":307,"line":308},[305,573,574],{"class":311},"import",[305,576,577],{"class":322}," React, { Suspense } ",[305,579,580],{"class":311},"from",[305,582,584],{"class":583},"sZZnC"," 'react'",[305,586,587],{"class":322},";\n",[305,589,590],{"class":307,"line":347},[305,591,519],{"emptyLinePlaceholder":518},[305,593,594,596,599,601,603,606,608,610,613,615,618],{"class":307,"line":354},[305,595,312],{"class":311},[305,597,598],{"class":315}," LazyComponent",[305,600,319],{"class":311},[305,602,323],{"class":322},[305,604,605],{"class":326},"lazy",[305,607,493],{"class":322},[305,609,425],{"class":311},[305,611,612],{"class":311}," import",[305,614,330],{"class":322},[305,616,617],{"class":583},"'./LazyComponent'",[305,619,620],{"class":322},"));\n",[305,622,623],{"class":307,"line":401},[305,624,519],{"emptyLinePlaceholder":518},[305,626,627,629,631],{"class":307,"line":407},[305,628,333],{"class":311},[305,630,316],{"class":326},[305,632,633],{"class":322},"() {\n",[305,635,636,638],{"class":307,"line":431},[305,637,502],{"class":311},[305,639,640],{"class":322}," (\n",[305,642,643,646,650],{"class":307,"line":437},[305,644,645],{"class":322},"    \u003C",[305,647,649],{"class":648},"s9eBZ","div",[305,651,652],{"class":322},">\n",[305,654,655,658,661,664,667,670,672,675,677],{"class":307,"line":452},[305,656,657],{"class":322},"      \u003C",[305,659,660],{"class":315},"Suspense",[305,662,663],{"class":326}," fallback",[305,665,666],{"class":311},"=",[305,668,669],{"class":322},"{\u003C",[305,671,649],{"class":648},[305,673,674],{"class":322},">Loading...\u003C/",[305,676,649],{"class":648},[305,678,679],{"class":322},">}>\n",[305,681,682,685,688],{"class":307,"line":458},[305,683,684],{"class":322},"        \u003C",[305,686,687],{"class":315},"LazyComponent",[305,689,690],{"class":322}," />\n",[305,692,694,697,699],{"class":307,"line":693},10,[305,695,696],{"class":322},"      \u003C/",[305,698,660],{"class":315},[305,700,652],{"class":322},[305,702,704,707,709],{"class":307,"line":703},11,[305,705,706],{"class":322},"    \u003C/",[305,708,649],{"class":648},[305,710,652],{"class":322},[305,712,714],{"class":307,"line":713},12,[305,715,716],{"class":322},"  );\n",[305,718,720],{"class":307,"line":719},13,[305,721,722],{"class":322},"}\n",[287,724,726],{"id":725},"라우트-기반-코드-분할","라우트 기반 코드 분할",[278,728,729],{},"라우팅 라이브러리(React Router)와 함께 활용하여 각 페이지 단위로 코드를 분할합니다.",[295,731,733],{"className":297,"code":732,"language":299,"meta":300,"style":300},"import React, { Suspense, lazy } from 'react';\nimport { BrowserRouter as Router, Routes, Route } from 'react-router-dom';\n\nconst Home = lazy(() => import('./routes/Home'));\nconst About = lazy(() => import('./routes/About'));\nconst Contact = lazy(() => import('./routes/Contact'));\n\nfunction App() {\n  return (\n    \u003CRouter>\n      \u003CSuspense fallback={\u003Cdiv>Loading...\u003C/div>}>\n        \u003CRoutes>\n          \u003CRoute path=\"/\" element={\u003CHome />} />\n          \u003CRoute path=\"/about\" element={\u003CAbout />} />\n          \u003CRoute path=\"/contact\" element={\u003CContact />} />\n        \u003C/Routes>\n      \u003C/Suspense>\n    \u003C/Router>\n  );\n}\n",[302,734,735,748,768,772,797,821,845,849,858,864,873,893,902,931,956,981,991,1000,1009,1014],{"__ignoreMap":300},[305,736,737,739,742,744,746],{"class":307,"line":308},[305,738,574],{"class":311},[305,740,741],{"class":322}," React, { Suspense, lazy } ",[305,743,580],{"class":311},[305,745,584],{"class":583},[305,747,587],{"class":322},[305,749,750,752,755,758,761,763,766],{"class":307,"line":347},[305,751,574],{"class":311},[305,753,754],{"class":322}," { BrowserRouter ",[305,756,757],{"class":311},"as",[305,759,760],{"class":322}," Router, Routes, Route } ",[305,762,580],{"class":311},[305,764,765],{"class":583}," 'react-router-dom'",[305,767,587],{"class":322},[305,769,770],{"class":307,"line":354},[305,771,519],{"emptyLinePlaceholder":518},[305,773,774,776,779,781,784,786,788,790,792,795],{"class":307,"line":401},[305,775,312],{"class":311},[305,777,778],{"class":315}," Home",[305,780,319],{"class":311},[305,782,783],{"class":326}," lazy",[305,785,493],{"class":322},[305,787,425],{"class":311},[305,789,612],{"class":311},[305,791,330],{"class":322},[305,793,794],{"class":583},"'./routes/Home'",[305,796,620],{"class":322},[305,798,799,801,804,806,808,810,812,814,816,819],{"class":307,"line":407},[305,800,312],{"class":311},[305,802,803],{"class":315}," About",[305,805,319],{"class":311},[305,807,783],{"class":326},[305,809,493],{"class":322},[305,811,425],{"class":311},[305,813,612],{"class":311},[305,815,330],{"class":322},[305,817,818],{"class":583},"'./routes/About'",[305,820,620],{"class":322},[305,822,823,825,828,830,832,834,836,838,840,843],{"class":307,"line":431},[305,824,312],{"class":311},[305,826,827],{"class":315}," Contact",[305,829,319],{"class":311},[305,831,783],{"class":326},[305,833,493],{"class":322},[305,835,425],{"class":311},[305,837,612],{"class":311},[305,839,330],{"class":322},[305,841,842],{"class":583},"'./routes/Contact'",[305,844,620],{"class":322},[305,846,847],{"class":307,"line":437},[305,848,519],{"emptyLinePlaceholder":518},[305,850,851,853,856],{"class":307,"line":452},[305,852,333],{"class":311},[305,854,855],{"class":326}," App",[305,857,633],{"class":322},[305,859,860,862],{"class":307,"line":458},[305,861,502],{"class":311},[305,863,640],{"class":322},[305,865,866,868,871],{"class":307,"line":693},[305,867,645],{"class":322},[305,869,870],{"class":315},"Router",[305,872,652],{"class":322},[305,874,875,877,879,881,883,885,887,889,891],{"class":307,"line":703},[305,876,657],{"class":322},[305,878,660],{"class":315},[305,880,663],{"class":326},[305,882,666],{"class":311},[305,884,669],{"class":322},[305,886,649],{"class":648},[305,888,674],{"class":322},[305,890,649],{"class":648},[305,892,679],{"class":322},[305,894,895,897,900],{"class":307,"line":713},[305,896,684],{"class":322},[305,898,899],{"class":315},"Routes",[305,901,652],{"class":322},[305,903,904,907,910,913,915,918,921,923,925,928],{"class":307,"line":719},[305,905,906],{"class":322},"          \u003C",[305,908,909],{"class":315},"Route",[305,911,912],{"class":326}," path",[305,914,666],{"class":311},[305,916,917],{"class":583},"\"/\"",[305,919,920],{"class":326}," element",[305,922,666],{"class":311},[305,924,669],{"class":322},[305,926,927],{"class":315},"Home",[305,929,930],{"class":322}," />} />\n",[305,932,934,936,938,940,942,945,947,949,951,954],{"class":307,"line":933},14,[305,935,906],{"class":322},[305,937,909],{"class":315},[305,939,912],{"class":326},[305,941,666],{"class":311},[305,943,944],{"class":583},"\"/about\"",[305,946,920],{"class":326},[305,948,666],{"class":311},[305,950,669],{"class":322},[305,952,953],{"class":315},"About",[305,955,930],{"class":322},[305,957,959,961,963,965,967,970,972,974,976,979],{"class":307,"line":958},15,[305,960,906],{"class":322},[305,962,909],{"class":315},[305,964,912],{"class":326},[305,966,666],{"class":311},[305,968,969],{"class":583},"\"/contact\"",[305,971,920],{"class":326},[305,973,666],{"class":311},[305,975,669],{"class":322},[305,977,978],{"class":315},"Contact",[305,980,930],{"class":322},[305,982,984,987,989],{"class":307,"line":983},16,[305,985,986],{"class":322},"        \u003C/",[305,988,899],{"class":315},[305,990,652],{"class":322},[305,992,994,996,998],{"class":307,"line":993},17,[305,995,696],{"class":322},[305,997,660],{"class":315},[305,999,652],{"class":322},[305,1001,1003,1005,1007],{"class":307,"line":1002},18,[305,1004,706],{"class":322},[305,1006,870],{"class":315},[305,1008,652],{"class":322},[305,1010,1012],{"class":307,"line":1011},19,[305,1013,716],{"class":322},[305,1015,1017],{"class":307,"line":1016},20,[305,1018,722],{"class":322},[282,1020,1022],{"id":1021},"상태-관리-최적화","상태 관리 최적화",[287,1024,1026],{"id":1025},"전역-상태-최소화","전역 상태 최소화",[278,1028,1029],{},"애플리케이션 전체에서 필요한 상태만 전역 상태로 관리하고, 컴포넌트 로컬 상태를 적절히 활용합니다.",[287,1031,1033],{"id":1032},"context-api의-분리","Context API의 분리",[278,1035,1036],{},"Context API를 사용할 때 모든 상태를 하나의 Context에 넣지 말고, 논리적으로 분리하여 필요한 부분만 리렌더링되도록 합니다.",[295,1038,1040],{"className":297,"code":1039,"language":299,"meta":300,"style":300},"// 여러 개의 작은 Context 생성\nconst ThemeContext = React.createContext();\nconst UserContext = React.createContext();\nconst SettingsContext = React.createContext();\n\nfunction App() {\n  // 각 Context의 Provider를 중첩하여 사용\n  return (\n    \u003CThemeContext.Provider value={theme}>\n      \u003CUserContext.Provider value={user}>\n        \u003CSettingsContext.Provider value={settings}>\n          \u003CMainApp />\n        \u003C/SettingsContext.Provider>\n      \u003C/UserContext.Provider>\n    \u003C/ThemeContext.Provider>\n  );\n}\n",[302,1041,1042,1047,1064,1079,1094,1098,1106,1111,1117,1132,1146,1160,1169,1177,1185,1193,1197],{"__ignoreMap":300},[305,1043,1044],{"class":307,"line":308},[305,1045,1046],{"class":350},"// 여러 개의 작은 Context 생성\n",[305,1048,1049,1051,1054,1056,1058,1061],{"class":307,"line":347},[305,1050,312],{"class":311},[305,1052,1053],{"class":315}," ThemeContext",[305,1055,319],{"class":311},[305,1057,323],{"class":322},[305,1059,1060],{"class":326},"createContext",[305,1062,1063],{"class":322},"();\n",[305,1065,1066,1068,1071,1073,1075,1077],{"class":307,"line":354},[305,1067,312],{"class":311},[305,1069,1070],{"class":315}," UserContext",[305,1072,319],{"class":311},[305,1074,323],{"class":322},[305,1076,1060],{"class":326},[305,1078,1063],{"class":322},[305,1080,1081,1083,1086,1088,1090,1092],{"class":307,"line":401},[305,1082,312],{"class":311},[305,1084,1085],{"class":315}," SettingsContext",[305,1087,319],{"class":311},[305,1089,323],{"class":322},[305,1091,1060],{"class":326},[305,1093,1063],{"class":322},[305,1095,1096],{"class":307,"line":407},[305,1097,519],{"emptyLinePlaceholder":518},[305,1099,1100,1102,1104],{"class":307,"line":431},[305,1101,333],{"class":311},[305,1103,855],{"class":326},[305,1105,633],{"class":322},[305,1107,1108],{"class":307,"line":437},[305,1109,1110],{"class":350},"  // 각 Context의 Provider를 중첩하여 사용\n",[305,1112,1113,1115],{"class":307,"line":452},[305,1114,502],{"class":311},[305,1116,640],{"class":322},[305,1118,1119,1121,1124,1127,1129],{"class":307,"line":458},[305,1120,645],{"class":322},[305,1122,1123],{"class":315},"ThemeContext.Provider",[305,1125,1126],{"class":326}," value",[305,1128,666],{"class":311},[305,1130,1131],{"class":322},"{theme}>\n",[305,1133,1134,1136,1139,1141,1143],{"class":307,"line":693},[305,1135,657],{"class":322},[305,1137,1138],{"class":315},"UserContext.Provider",[305,1140,1126],{"class":326},[305,1142,666],{"class":311},[305,1144,1145],{"class":322},"{user}>\n",[305,1147,1148,1150,1153,1155,1157],{"class":307,"line":703},[305,1149,684],{"class":322},[305,1151,1152],{"class":315},"SettingsContext.Provider",[305,1154,1126],{"class":326},[305,1156,666],{"class":311},[305,1158,1159],{"class":322},"{settings}>\n",[305,1161,1162,1164,1167],{"class":307,"line":713},[305,1163,906],{"class":322},[305,1165,1166],{"class":315},"MainApp",[305,1168,690],{"class":322},[305,1170,1171,1173,1175],{"class":307,"line":719},[305,1172,986],{"class":322},[305,1174,1152],{"class":315},[305,1176,652],{"class":322},[305,1178,1179,1181,1183],{"class":307,"line":933},[305,1180,696],{"class":322},[305,1182,1138],{"class":315},[305,1184,652],{"class":322},[305,1186,1187,1189,1191],{"class":307,"line":958},[305,1188,706],{"class":322},[305,1190,1123],{"class":315},[305,1192,652],{"class":322},[305,1194,1195],{"class":307,"line":983},[305,1196,716],{"class":322},[305,1198,1199],{"class":307,"line":993},[305,1200,722],{"class":322},[282,1202,1204],{"id":1203},"가상화-리스트-virtualized-lists","가상화 리스트 (Virtualized Lists)",[278,1206,1207],{},"대량의 데이터를 렌더링할 때 화면에 보이는 항목만 렌더링하여 성능을 개선합니다.",[295,1209,1211],{"className":297,"code":1210,"language":299,"meta":300,"style":300},"import { FixedSizeList } from 'react-window';\n\nfunction VirtualizedList({ items }) {\n  const Row = ({ index, style }) => (\n    \u003Cdiv style={style}>\n      {items[index].name}\n    \u003C/div>\n  );\n\n  return (\n    \u003CFixedSizeList\n      height={500}\n      width={300}\n      itemCount={items.length}\n      itemSize={35}\n    >\n      {Row}\n    \u003C/FixedSizeList>\n  );\n}\n",[302,1212,1213,1227,1231,1247,1275,1289,1294,1302,1306,1310,1316,1323,1338,1352,1367,1381,1386,1391,1400,1404],{"__ignoreMap":300},[305,1214,1215,1217,1220,1222,1225],{"class":307,"line":308},[305,1216,574],{"class":311},[305,1218,1219],{"class":322}," { FixedSizeList } ",[305,1221,580],{"class":311},[305,1223,1224],{"class":583}," 'react-window'",[305,1226,587],{"class":322},[305,1228,1229],{"class":307,"line":347},[305,1230,519],{"emptyLinePlaceholder":518},[305,1232,1233,1235,1238,1241,1244],{"class":307,"line":354},[305,1234,333],{"class":311},[305,1236,1237],{"class":326}," VirtualizedList",[305,1239,1240],{"class":322},"({ ",[305,1242,1243],{"class":340},"items",[305,1245,1246],{"class":322}," }) {\n",[305,1248,1249,1252,1255,1257,1260,1263,1265,1268,1271,1273],{"class":307,"line":401},[305,1250,1251],{"class":311},"  const",[305,1253,1254],{"class":326}," Row",[305,1256,319],{"class":311},[305,1258,1259],{"class":322}," ({ ",[305,1261,1262],{"class":340},"index",[305,1264,416],{"class":322},[305,1266,1267],{"class":340},"style",[305,1269,1270],{"class":322}," }) ",[305,1272,425],{"class":311},[305,1274,640],{"class":322},[305,1276,1277,1279,1281,1284,1286],{"class":307,"line":407},[305,1278,645],{"class":322},[305,1280,649],{"class":648},[305,1282,1283],{"class":326}," style",[305,1285,666],{"class":311},[305,1287,1288],{"class":322},"{style}>\n",[305,1290,1291],{"class":307,"line":431},[305,1292,1293],{"class":322},"      {items[index].name}\n",[305,1295,1296,1298,1300],{"class":307,"line":437},[305,1297,706],{"class":322},[305,1299,649],{"class":648},[305,1301,652],{"class":322},[305,1303,1304],{"class":307,"line":452},[305,1305,716],{"class":322},[305,1307,1308],{"class":307,"line":458},[305,1309,519],{"emptyLinePlaceholder":518},[305,1311,1312,1314],{"class":307,"line":693},[305,1313,502],{"class":311},[305,1315,640],{"class":322},[305,1317,1318,1320],{"class":307,"line":703},[305,1319,645],{"class":322},[305,1321,1322],{"class":315},"FixedSizeList\n",[305,1324,1325,1328,1330,1333,1336],{"class":307,"line":713},[305,1326,1327],{"class":326},"      height",[305,1329,666],{"class":311},[305,1331,1332],{"class":322},"{",[305,1334,1335],{"class":315},"500",[305,1337,722],{"class":322},[305,1339,1340,1343,1345,1347,1350],{"class":307,"line":719},[305,1341,1342],{"class":326},"      width",[305,1344,666],{"class":311},[305,1346,1332],{"class":322},[305,1348,1349],{"class":315},"300",[305,1351,722],{"class":322},[305,1353,1354,1357,1359,1362,1365],{"class":307,"line":933},[305,1355,1356],{"class":326},"      itemCount",[305,1358,666],{"class":311},[305,1360,1361],{"class":322},"{items.",[305,1363,1364],{"class":315},"length",[305,1366,722],{"class":322},[305,1368,1369,1372,1374,1376,1379],{"class":307,"line":958},[305,1370,1371],{"class":326},"      itemSize",[305,1373,666],{"class":311},[305,1375,1332],{"class":322},[305,1377,1378],{"class":315},"35",[305,1380,722],{"class":322},[305,1382,1383],{"class":307,"line":983},[305,1384,1385],{"class":322},"    >\n",[305,1387,1388],{"class":307,"line":993},[305,1389,1390],{"class":322},"      {Row}\n",[305,1392,1393,1395,1398],{"class":307,"line":1002},[305,1394,706],{"class":322},[305,1396,1397],{"class":315},"FixedSizeList",[305,1399,652],{"class":322},[305,1401,1402],{"class":307,"line":1011},[305,1403,716],{"class":322},[305,1405,1406],{"class":307,"line":1016},[305,1407,722],{"class":322},[282,1409,1411],{"id":1410},"이미지-최적화","이미지 최적화",[287,1413,1415],{"id":1414},"지연-로딩lazy-loading","지연 로딩(Lazy Loading)",[278,1417,1418],{},"화면에 보이는 이미지만 로드합니다.",[295,1420,1422],{"className":297,"code":1421,"language":299,"meta":300,"style":300},"import { LazyLoadImage } from 'react-lazy-load-image-component';\n\nfunction MyImage({ src, alt }) {\n  return (\n    \u003CLazyLoadImage\n      src={src}\n      alt={alt}\n      effect=\"blur\"\n      placeholderSrc={smallImageSrc}\n    />\n  );\n}\n",[302,1423,1424,1438,1442,1461,1467,1474,1484,1494,1504,1514,1519,1523],{"__ignoreMap":300},[305,1425,1426,1428,1431,1433,1436],{"class":307,"line":308},[305,1427,574],{"class":311},[305,1429,1430],{"class":322}," { LazyLoadImage } ",[305,1432,580],{"class":311},[305,1434,1435],{"class":583}," 'react-lazy-load-image-component'",[305,1437,587],{"class":322},[305,1439,1440],{"class":307,"line":347},[305,1441,519],{"emptyLinePlaceholder":518},[305,1443,1444,1446,1449,1451,1454,1456,1459],{"class":307,"line":354},[305,1445,333],{"class":311},[305,1447,1448],{"class":326}," MyImage",[305,1450,1240],{"class":322},[305,1452,1453],{"class":340},"src",[305,1455,416],{"class":322},[305,1457,1458],{"class":340},"alt",[305,1460,1246],{"class":322},[305,1462,1463,1465],{"class":307,"line":401},[305,1464,502],{"class":311},[305,1466,640],{"class":322},[305,1468,1469,1471],{"class":307,"line":407},[305,1470,645],{"class":322},[305,1472,1473],{"class":315},"LazyLoadImage\n",[305,1475,1476,1479,1481],{"class":307,"line":431},[305,1477,1478],{"class":326},"      src",[305,1480,666],{"class":311},[305,1482,1483],{"class":322},"{src}\n",[305,1485,1486,1489,1491],{"class":307,"line":437},[305,1487,1488],{"class":326},"      alt",[305,1490,666],{"class":311},[305,1492,1493],{"class":322},"{alt}\n",[305,1495,1496,1499,1501],{"class":307,"line":452},[305,1497,1498],{"class":326},"      effect",[305,1500,666],{"class":311},[305,1502,1503],{"class":583},"\"blur\"\n",[305,1505,1506,1509,1511],{"class":307,"line":458},[305,1507,1508],{"class":326},"      placeholderSrc",[305,1510,666],{"class":311},[305,1512,1513],{"class":322},"{smallImageSrc}\n",[305,1515,1516],{"class":307,"line":693},[305,1517,1518],{"class":322},"    />\n",[305,1520,1521],{"class":307,"line":703},[305,1522,716],{"class":322},[305,1524,1525],{"class":307,"line":713},[305,1526,722],{"class":322},[287,1528,1530],{"id":1529},"이미지-포맷-최적화","이미지 포맷 최적화",[278,1532,1533],{},"WebP와 같은 최신 이미지 포맷을 사용하고, 필요에 맞는 적절한 크기로 이미지를 제공합니다.",[295,1535,1537],{"className":297,"code":1536,"language":299,"meta":300,"style":300},"\u003Cpicture>\n  \u003Csource srcSet=\"image.webp\" type=\"image/webp\" />\n  \u003Csource srcSet=\"image.jpg\" type=\"image/jpeg\" />\n  \u003Cimg src=\"image.jpg\" alt=\"Description\" width=\"800\" height=\"600\" />\n\u003C/picture>\n",[302,1538,1539,1549,1575,1597,1637],{"__ignoreMap":300},[305,1540,1541,1544,1547],{"class":307,"line":308},[305,1542,1543],{"class":322},"\u003C",[305,1545,1546],{"class":648},"picture",[305,1548,652],{"class":322},[305,1550,1551,1554,1557,1560,1562,1565,1568,1570,1573],{"class":307,"line":347},[305,1552,1553],{"class":322},"  \u003C",[305,1555,1556],{"class":648},"source",[305,1558,1559],{"class":326}," srcSet",[305,1561,666],{"class":311},[305,1563,1564],{"class":583},"\"image.webp\"",[305,1566,1567],{"class":326}," type",[305,1569,666],{"class":311},[305,1571,1572],{"class":583},"\"image/webp\"",[305,1574,690],{"class":322},[305,1576,1577,1579,1581,1583,1585,1588,1590,1592,1595],{"class":307,"line":354},[305,1578,1553],{"class":322},[305,1580,1556],{"class":648},[305,1582,1559],{"class":326},[305,1584,666],{"class":311},[305,1586,1587],{"class":583},"\"image.jpg\"",[305,1589,1567],{"class":326},[305,1591,666],{"class":311},[305,1593,1594],{"class":583},"\"image/jpeg\"",[305,1596,690],{"class":322},[305,1598,1599,1601,1604,1607,1609,1611,1614,1616,1619,1622,1624,1627,1630,1632,1635],{"class":307,"line":401},[305,1600,1553],{"class":322},[305,1602,1603],{"class":648},"img",[305,1605,1606],{"class":326}," src",[305,1608,666],{"class":311},[305,1610,1587],{"class":583},[305,1612,1613],{"class":326}," alt",[305,1615,666],{"class":311},[305,1617,1618],{"class":583},"\"Description\"",[305,1620,1621],{"class":326}," width",[305,1623,666],{"class":311},[305,1625,1626],{"class":583},"\"800\"",[305,1628,1629],{"class":326}," height",[305,1631,666],{"class":311},[305,1633,1634],{"class":583},"\"600\"",[305,1636,690],{"class":322},[305,1638,1639,1642,1644],{"class":307,"line":407},[305,1640,1641],{"class":322},"\u003C/",[305,1643,1546],{"class":648},[305,1645,652],{"class":322},[282,1647,1649],{"id":1648},"웹-성능-측정-도구","웹 성능 측정 도구",[287,1651,1653],{"id":1652},"react-developer-tools","React Developer Tools",[278,1655,1656],{},"React 개발자 도구의 Profiler 탭을 사용하여 컴포넌트의 렌더링 시간과 빈도를 측정합니다.",[287,1658,1660],{"id":1659},"lighthouse","Lighthouse",[278,1662,1663],{},"Google의 Lighthouse를 사용하여 웹사이트의 전반적인 성능, 접근성, SEO 등을 측정합니다.",[287,1665,1667],{"id":1666},"web-vitals","Web Vitals",[278,1669,1670],{},"Core Web Vitals(LCP, FID, CLS)를 측정하여 사용자 경험 지표를 추적합니다.",[295,1672,1674],{"className":297,"code":1673,"language":299,"meta":300,"style":300},"import { getCLS, getFID, getLCP } from 'web-vitals';\n\nfunction sendToAnalytics(metric) {\n  const { name, value } = metric;\n  console.log(`${name}: ${value}`);\n  // 분석 서비스로 데이터 전송\n}\n\ngetCLS(sendToAnalytics);\ngetFID(sendToAnalytics);\ngetLCP(sendToAnalytics);\n",[302,1675,1676,1690,1694,1708,1731,1756,1761,1765,1769,1777,1784],{"__ignoreMap":300},[305,1677,1678,1680,1683,1685,1688],{"class":307,"line":308},[305,1679,574],{"class":311},[305,1681,1682],{"class":322}," { getCLS, getFID, getLCP } ",[305,1684,580],{"class":311},[305,1686,1687],{"class":583}," 'web-vitals'",[305,1689,587],{"class":322},[305,1691,1692],{"class":307,"line":347},[305,1693,519],{"emptyLinePlaceholder":518},[305,1695,1696,1698,1701,1703,1706],{"class":307,"line":354},[305,1697,333],{"class":311},[305,1699,1700],{"class":326}," sendToAnalytics",[305,1702,330],{"class":322},[305,1704,1705],{"class":340},"metric",[305,1707,344],{"class":322},[305,1709,1710,1712,1715,1718,1720,1723,1726,1728],{"class":307,"line":401},[305,1711,1251],{"class":311},[305,1713,1714],{"class":322}," { ",[305,1716,1717],{"class":315},"name",[305,1719,416],{"class":322},[305,1721,1722],{"class":315},"value",[305,1724,1725],{"class":322}," } ",[305,1727,666],{"class":311},[305,1729,1730],{"class":322}," metric;\n",[305,1732,1733,1736,1739,1741,1744,1746,1749,1751,1754],{"class":307,"line":407},[305,1734,1735],{"class":322},"  console.",[305,1737,1738],{"class":326},"log",[305,1740,330],{"class":322},[305,1742,1743],{"class":583},"`${",[305,1745,1717],{"class":322},[305,1747,1748],{"class":583},"}: ${",[305,1750,1722],{"class":322},[305,1752,1753],{"class":583},"}`",[305,1755,461],{"class":322},[305,1757,1758],{"class":307,"line":431},[305,1759,1760],{"class":350},"  // 분석 서비스로 데이터 전송\n",[305,1762,1763],{"class":307,"line":437},[305,1764,722],{"class":322},[305,1766,1767],{"class":307,"line":452},[305,1768,519],{"emptyLinePlaceholder":518},[305,1770,1771,1774],{"class":307,"line":458},[305,1772,1773],{"class":326},"getCLS",[305,1775,1776],{"class":322},"(sendToAnalytics);\n",[305,1778,1779,1782],{"class":307,"line":693},[305,1780,1781],{"class":326},"getFID",[305,1783,1776],{"class":322},[305,1785,1786,1789],{"class":307,"line":703},[305,1787,1788],{"class":326},"getLCP",[305,1790,1776],{"class":322},[282,1792,1793],{"id":1793},"결론",[278,1795,1796],{},"React 애플리케이션 성능 최적화는 단일 기법이 아닌 여러 기법의 조합으로 이루어집니다. 항상 측정 가능한 지표를 기반으로 최적화하고, 실제 사용자 경험 향상에 초점을 맞추세요. 모든 최적화 기법을 동시에 적용하기보다는 가장 큰 성능 향상을 가져올 수 있는 부분부터 점진적으로 적용하는 것이 효과적입니다.",[1267,1798,1799],{},"html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":300,"searchDepth":347,"depth":347,"links":1801},[1802,1806,1810,1814,1815,1819,1824],{"id":284,"depth":347,"text":285,"children":1803},[1804,1805],{"id":289,"depth":354,"text":290},{"id":464,"depth":354,"text":465},{"id":556,"depth":347,"text":557,"children":1807},[1808,1809],{"id":560,"depth":354,"text":561},{"id":725,"depth":354,"text":726},{"id":1021,"depth":347,"text":1022,"children":1811},[1812,1813],{"id":1025,"depth":354,"text":1026},{"id":1032,"depth":354,"text":1033},{"id":1203,"depth":347,"text":1204},{"id":1410,"depth":347,"text":1411,"children":1816},[1817,1818],{"id":1414,"depth":354,"text":1415},{"id":1529,"depth":354,"text":1530},{"id":1648,"depth":347,"text":1649,"children":1820},[1821,1822,1823],{"id":1652,"depth":354,"text":1653},{"id":1659,"depth":354,"text":1660},{"id":1666,"depth":354,"text":1667},{"id":1793,"depth":347,"text":1793},"React 앱의 성능을 향상시키기 위한 실용적인 최적화 전략과 베스트 프랙티스","md","/images/content/3.develop/2.frameworks/2.react/react-performance.png",{"createdAt":1829},"2024-01-28",{"icon":96},{"title":98,"description":1825},"2024-02-22","cUnKhJE71fKtoxJInfF5ANsjJnunfXdN_LDrp2Um0G0",[1835,1839,1843,1874,1884,1909],{"title":5,"path":6,"stem":7,"children":1836,"page":19},[1837,1838],{"title":10,"path":11,"stem":12,"icon":13},{"title":15,"path":16,"stem":17,"icon":18},{"title":21,"path":22,"stem":23,"children":1840,"page":19},[1841,1842],{"title":26,"path":27,"stem":28,"icon":29},{"title":21,"path":31,"stem":32,"icon":33},{"title":35,"path":36,"stem":37,"children":1844,"page":19},[1845,1849,1856,1873],{"title":40,"path":41,"stem":42,"children":1846,"page":19},[1847,1848],{"title":45,"path":46,"stem":47,"redirect":48,"icon":49},{"title":51,"path":48,"stem":52,"icon":49},{"title":54,"path":55,"stem":56,"children":1850,"page":19},[1851,1855],{"title":59,"path":60,"stem":61,"children":1852,"page":19},[1853,1854],{"title":59,"path":64,"stem":65,"icon":66},{"title":68,"path":69,"stem":70,"icon":66},{"title":54,"path":72,"stem":73,"redirect":60,"icon":66},{"title":75,"path":76,"stem":77,"children":1857,"page":19},[1858,1861,1865,1869,1872],{"title":80,"path":81,"stem":82,"children":1859,"page":19},[1860],{"title":80,"path":85,"stem":86,"icon":87},{"title":89,"path":90,"stem":91,"children":1862,"page":19},[1863,1864],{"title":89,"path":94,"stem":95,"icon":96},{"title":98,"path":99,"stem":100,"icon":96},{"title":102,"path":103,"stem":104,"children":1866,"page":19},[1867,1868],{"title":102,"path":107,"stem":108,"icon":109},{"title":111,"path":112,"stem":113,"icon":87},{"title":115,"path":116,"stem":117,"children":1870,"page":19},[1871],{"title":120,"path":121,"stem":122,"icon":123},{"title":75,"path":125,"stem":126,"icon":127},{"title":129,"path":130,"stem":131,"icon":127},{"title":133,"path":134,"stem":135,"children":1875,"page":19},[1876,1883],{"title":138,"path":139,"stem":140,"children":1877,"icon":143},[1878,1879,1882],{"title":138,"path":139,"stem":140,"icon":143},{"title":145,"path":146,"stem":147,"children":1880,"page":19},[1881],{"title":150,"path":151,"stem":152,"icon":153},{"title":155,"path":156,"stem":157,"icon":158},{"title":160,"path":161,"stem":162,"icon":158},{"title":164,"path":165,"stem":166,"children":1885,"page":19},[1886,1894,1908],{"title":169,"path":170,"stem":171,"children":1887,"page":19},[1888],{"title":174,"path":175,"stem":176,"children":1889,"page":19},[1890],{"title":179,"path":180,"stem":181,"children":1891,"page":19},[1892,1893],{"title":179,"path":184,"stem":185,"redirect":180,"icon":186},{"title":188,"path":189,"stem":190,"icon":191},{"title":193,"path":194,"stem":195,"children":1895,"page":19},[1896,1897,1898,1899,1900,1901,1902,1903,1904,1905,1906,1907],{"title":198,"path":199,"stem":200,"icon":201},{"title":203,"path":204,"stem":205},{"title":207,"path":208,"stem":209},{"title":211,"path":212,"stem":213},{"title":215,"path":216,"stem":217},{"title":219,"path":220,"stem":221},{"title":223,"path":224,"stem":225},{"title":227,"path":228,"stem":229},{"title":231,"path":232,"stem":233},{"title":235,"path":236,"stem":237},{"title":239,"path":240,"stem":241},{"title":243,"path":244,"stem":245,"redirect":199,"icon":246},{"title":248,"path":249,"stem":250,"icon":251},{"title":253,"path":254,"stem":255,"children":1910,"page":19},[1911,1914],{"title":258,"path":259,"stem":260,"children":1912,"page":19},[1913],{"title":263,"path":264,"stem":265,"icon":266},{"title":253,"path":268,"stem":269,"icon":270},[1916,1917],{"title":89,"path":94,"stem":95,"icon":96,"children":-1},{"title":102,"path":107,"stem":108,"icon":109,"children":-1},1773760863581]