Prop 전달 문제
prop 전달이 유지 보수성을 해치는 이유, provide/inject가 해결하는 문제, 사용 시점을 알아봅니다.
Prop 전달 문제은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
프롭 전달이란 무엇인가
프롭 전달은 깊이 중첩된 컴포넌트에 도달하기 위해 여러 컴포넌트 계층을 거쳐 데이터를 전달하는 것입니다. 중간 컴포넌트는 해당 프롭을 사용하지 않더라도 받아서 전달해야 합니다.
깊은 컴포넌트 트리
다음과 같은 트리를 생각해 보세요. App -> Layout -> Page -> Section -> Widget. 가장 아래의 Widget에는 현재 테마가 필요하지만, 맨 위의 App만 테마를 알고 있습니다.
App
Layout
Page
Section
Widget <-- needs "theme"App에서 전달하기
App은 테마를 보유하고 이를 프롭으로 Layout에 전달합니다.
<!-- App.vue -->
<Layout :theme="theme" />Layout에서 전달하기
Layout은 테마를 사용하지 않지만 다음 단계에 도달하게 하려면 테마를 선언하고 전달해야 합니다.
<!-- Layout.vue -->
const props = defineProps({ theme: String });
// template:
<Page :theme="props.theme" />Page에서도 전달하기
Page도 테마에는 관심이 없지만 같은 상용구 코드인 선언 후 전달을 반복합니다.
<!-- Page.vue -->
const props = defineProps({ theme: String });
<Section :theme="props.theme" />Section에서 다시 전달하기
Section에서도 다시 전달합니다. 모든 계층에 해당 계층의 책임과는 무관한 반복적인 연결 코드가 추가됩니다.
<!-- Section.vue -->
const props = defineProps({ theme: String });
<Widget :theme="props.theme" />마침내 Widget에서 사용하기
가장 아래에 있는 Widget에서만 실제로 테마를 사용합니다. 위의 네 계층은 단순히 전달만 했습니다.
<!-- Widget.vue -->
const props = defineProps({ theme: String });
// uses props.theme to style itself이 방식이 문제인 이유
프롭 전달은 다음과 같은 문제를 일으킵니다.
- 모든 중간 컴포넌트에 상용구 코드가 필요합니다
- 프롭 이름을 변경하면 여러 파일이 리팩터링으로 깨집니다
- 중간 프롭 때문에 각 컴포넌트에 실제로 필요한 것이 무엇인지 알기 어렵습니다
- 새로운 공유 값을 추가하기 어렵습니다
공유 값이 많으면 더 복잡해집니다
이제 user, locale, permissions를 추가해 보세요. 각각 네 계층 모두를 거쳐 전달해야 하므로 상용구 코드가 몇 배로 늘어납니다.
<Layout
:theme="theme"
:user="user"
:locale="locale"
:permissions="permissions"
/>모든 공유 값이 프롭에 적합한 것은 아닙니다
프롭은 직접적인 부모-자식 통신에 적합합니다. 하지만 테마, 현재 사용자, 국제화처럼 하위 트리 깊은 곳에서 필요한 값에는 프롭 전달이 적절한 도구가 아닙니다. 모든 하위 컴포넌트에 데이터를 직접 제공할 방법이 필요합니다.
provide와 주입 시작하기
Vue의 provide / inject를 사용하면 상위 컴포넌트가 데이터를 제공하고 모든 하위 컴포넌트가 중간 계층을 건너뛰어 직접 요청할 수 있습니다. 다음 레슨에서는 데이터를 제공하고 주입하는 방법을 다룹니다.
빠른 확인
프롭 전달을 가장 잘 설명한 것은 무엇입니까?
복습
깊은 트리의 모든 중간 컴포넌트가 사용하지도 않는 프롭을 선언하고 전달해야 하므로 상용구 코드가 생기고 리팩터링이 취약해지는 과정을 살펴보았습니다. 깊이 공유되는 값에는 provide/주입이 더 깔끔한 해결책입니다.
자주 묻는 질문
“Prop 전달 문제” 강의는 무료인가요?
네 — “Prop 전달 문제” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“Prop 전달 문제”에서 뭘 배우나요?
prop 전달이 유지 보수성을 해치는 이유, provide/inject가 해결하는 문제, 사용 시점을 알아봅니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
Vue Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.
“Prop 전달 문제” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.