개요
계층 구조에서 정보를 전달할 때 이제껏 배운 문법으로는 props속성을 사용해서 상위에서 하위로 전달했다. 하지만 만약 화면이 깊은 계층구조를 가지고 있고 최상위에서 최하위로 정보를 전달할 일이 발생할 때, 중간 단계에 있는 요소들은 불필요한 props선언을 계속 해줘야하는 불편함이 발생한다. 이런 현상을 props drilling이라고 하는데, 이런 문제를 해결하는 방법이 바로 Provide / Inject 문법이다.
이 구조를 개선할 수 있는 방법은 provide / inject 문법이다.
provide와 inject를 사용하면 부모는 계층의 깊이에 상관없이 데이터를 전달할 수 있다.
Provider / Inject
간단 예제 만들어보기
ProvideInject.vue
코드 복사하기
→ 상위 / 중위 / 하위 컴포넌트를 만들 것이다.
→ 상위 컴포넌트에서 중위 Child 컴포넌트 연결
→ 데이터 선언 : staticMessage / message / count
→ 프로바이더 등록
Child.vue
코드 복사하기
중위 컴포넌트 Child에 하위컴포넌트 DeepChild를 연결한다.
DeepChild.vue
코드 복사하기
→ 하위컴포넌트 DeepChild에서 상위 컴포넌트에서 provide된 요소들을 Inject로 주입한다.
→ 주입된 데이터를 내부 변수로 선언 후 등록
→ template에서 중괄호 바인딩 해서 사용
•
확인
이런 모습으로 출력이 되었다.
클릭이벤트로 하위컴포넌트 상태변경하기
버튼을 달고 count++ 이벤트를 달아보자.
•
확인
확인 완료
하위 컴포넌트에서 상위컴포넌트의 값을 전달받지 못할 경우?!
DeepChild.vue
inject 함수의 두 번째 매개변수로 디폴트 값을 설정할 수 있다.
디폴트 값으로 ‘default message’로 설정해보자
ProvideInject.vue
의도적으로 provide하지 않으면, 하위컴포넌트에서 값이 들어오지 않아서 디폴트 값인 ‘default message’가 출력이 되어야 한다.
•
확인
설정한 디폴트 값이 출력이 되는 것을 확인할 수 있다.
주입된 데이터를 변경하고 싶을때
추천하는 프레임워크 :
Provider/Inject를 사용할 때 값을 변경하는 로직으로 provider쪽에서만 하는 것을 추천한다. 이것이 책임을 분리하여 향후 유지관리가 용이해진다. 그래서 Injector 내부 컴포넌트에서 데이터를 변경해야되는 경우, 데이터 변경 메소드를 provide측에서 함께 제공하는 것을 추천
ProvideInject.vue
코드 복사하기
message를 추가하는 로직을 provider쪽에서 구현하고 메소드를 객체로 넘긴다. (중괄호 사용)
DeepChild.vue
코드 복사하기
inject된 메시지를 구조분해할당하고, 전달 받은 메소드를 사용해서 업데이트를 한다.
•
확인
상태변경 메소드로 글자가 추가 되었다.
데이터 변경을 막고 싶을 때는???
ProvideInject.vue
provide되는 데이터에 readonly속성을 걸어준다.
DeepChild.vue
readonly속성을 걸면 provide쪽에서 정의한 메소드로만 변경가능하고
inject쪽에서 하는 변경시도는 무시된다.
•
확인
provide쪽에서 정의한 메소드로만 변경이 가능하고
inject쪽에서의 변경시도는 무시되었다.
App-level Provide
vue를 실행하면 제일 최상위 부모 컴포넌트는 <App> 이다. App레벨에서 데이터를 provide하면 모든 요소에서 inject를 받을 수있다.
main.js
코드 복사하기
main.js에 app.provide로 전역에서 사용할 수 있는 데이터를 provide할 수 있다.
ProvideInject.vue
app.provide로 제공된 데이터는 어디서든지 inject해서 사용하면 된다.
•
확인
잘 출력된다.