; // 2단계\n}\n\nfunction Main({ user }) {\n // 여기서도 사용 안 함\n return ; // 3단계\n}\n\nfunction Content({ user }) {\n // 드디어 사용!\n return

{user.name}님 환영합니다

;\n}","language":"tsx","animation":"fade-up","delay":200},{"id":"s22-1-b3","type":"text","content":"Layout, Main은 user를 **쓰지도 않으면서** 전달만 합니다.\n이것이 Props Drilling의 핵심 문제입니다.","animation":"fade-up","delay":200}]},{"id":"ws22-1-step2","type":"read","title":"언제 문제가 되나?","beats":[{"id":"s22-1-b4","type":"text","group":"explain-ws22-1-step2-0","content":"2~3단계는 OK\n**5단계 이상**이면 대안을 찾으세요","animation":"word-reveal"},{"id":"s22-1-b5","type":"compare-header","group":"explain-ws22-1-step2-0","content":"","left":{"label":"괜찮은 경우","color":"mint","emoji":"✅"},"right":{"label":"문제가 되는 경우","color":"amber","emoji":"⚠️"},"animation":"fade-up","delay":200},{"id":"s22-1-b6","type":"compare-row","content":"","criterion":"깊이","left":"2~3단계","right":"5단계 이상","animation":"fade-up","delay":100},{"id":"s22-1-b7","type":"compare-row","content":"","criterion":"사용 범위","left":"특정 서브트리에서만 필요","right":"앱 전체에서 필요 (테마, 유저 정보)","animation":"fade-up","delay":100},{"id":"s22-1-b8","type":"compare-row","content":"","criterion":"유지보수","left":"컴포넌트 수가 적음","right":"중간 컴포넌트 수정 시 연쇄 변경","animation":"fade-up","delay":100}]},{"id":"ws22-1-step3","type":"read","title":"해결책 미리보기","beats":[{"id":"s22-1-b9","type":"text","group":"explain-ws22-1-step3-0","content":"Props Drilling을 해결하는\n**세 가지 방법**이 있습니다","animation":"word-reveal"},{"id":"s22-1-b10","type":"key-value-card","group":"explain-ws22-1-step3-0","content":"","kvTitle":"해결 방법 비교","entries":[{"key":"Context API","value":"React 내장. 전역 데이터 공유. 간단한 경우에 적합","icon":"🎯","color":"mint"},{"key":"Zustand","value":"가볍고 직관적인 상태 관리 라이브러리. 보일러플레이트 최소","icon":"🐻","color":"amber"},{"key":"컴포넌트 합성","value":"children으로 직접 전달. 구조 자체를 바꾸는 방법","icon":"🧩","color":"mint"}],"kvLayout":"vertical","animation":"fade-up","delay":200},{"id":"ws22-1-svg1","type":"svg-diagram","content":"","svgId":"web-p21","animation":"fade-up","delay":200},{"id":"s22-1-b11","type":"code-block","content":"","code":"// 컴포넌트 합성 — 구조를 바꿔 Drilling 회피\nfunction App() {\n const [user] = useState({ name: \"Kim\" });\n\n // Content를 App에서 직접 만들어서 넘김\n return (\n \n

\n \n

\n \n );\n}\n\n// Layout, Main은 children만 렌더링\nfunction Layout({ children }) {\n return

{children}

;\n}","language":"tsx","animation":"fade-up","delay":200},{"id":"s22-1-b12","type":"box","content":"**바이브 코더 팁**\nAI에게 코드를 생성시킬 때 \"Context 또는 Zustand로 상태 관리해줘\"라고 말하면\nProps Drilling 없이 깔끔한 코드를 받을 수 있습니다.","animation":"fade-up","delay":200}]},{"id":"ws22-1-step4","type":"quiz","title":"Props Drilling 퀴즈","beats":[{"id":"s22-1-b13","type":"ox","content":"Props Drilling은 항상 나쁜 패턴이므로 무조건 피해야 한다","correctAnswer":false,"feedback":"2~3단계의 얕은 Drilling은 자연스러운 React 패턴입니다. 깊어질 때만 대안을 고려하세요.","animation":"fade-up"},{"id":"s22-1-b14","type":"choices","content":"Props Drilling이 문제가 되는 핵심 이유는?","choices":[{"label":"성능이 크게 저하된다"},{"label":"중간 컴포넌트가 사용하지 않는 props를 전달해야 한다","correct":true},{"label":"TypeScript에서 지원하지 않는다"},{"label":"React에서 금지한 패턴이다"}],"feedback":"핵심 문제는 중간 컴포넌트가 자신은 쓰지 않는 props를 전달만 해야 한다는 점입니다.","animation":"fade-up"}]},{"id":"web-s22-1-note","type":"study-note","title":"필기노트: Props Drilling 문제","beats":[],"noteTitle":"Props Drilling 핵심 정리","noteGroups":[{"heading":"Props Drilling","items":[{"key":"Props Drilling","value":"상위 컴포넌트의 데이터를 하위로 전달할 때 **중간 컴포넌트를 모두 거쳐야** 하는 문제"},{"key":"문제점","value":"중간 컴포넌트가 **사용하지도 않는 props**를 전달만 해야 함"},{"key":"해결 방법","value":"**Context API**, Zustand 등 전역 상태 관리 도구 사용"}]}],"noteTip":"컴포넌트 3단계 이상 props를 내려보낸다면 전역 상태 관리를 고려하세요."}]},"courseId":"web-dev","courseName":"🌐 웹 개발 기초","section":{"id":"web-s22-1","title":"Props Drilling 문제","timeMinutes":20,"difficulty":"medium","status":"in-progress","lessonId":"web-s22-1"},"userId":"$undefined","courseTemplateType":"code","nextLessonId":"web-s22-2"}]

📖 Props Drilling이란?