728x90
Provide & Inject
일반적으로 부모->자식 컴포넌트로 데이터를 전달할 때는 props 사용
이렇게 정보를 전달하면 계층 구조를 따라 연속적으로 속성을 전달해야 하는 문제가 있음 (prop drilling)
provide & inject를 이용하여 이러한 문제를 해결함
공용 데이터를 부모 컴포넌트에서 제공(proivde)하여, 해당 데이터가 필요한 하위 컴포넌트에서 주입(inject) 하여 사용
사용 예시
- 조상(부모) 컴포넌트: App
- 부모(자식) 컴포넌트: SongList
- 자식(자손) 컴포넌트: SongListItem
App 에서 제공하는 icons 데이터를 공용데이터로 만들어 SongListItem에서 사용하도록 함
- App 내에서
provide()함수를 사용해 icons 속성을 가진 객체를 애플리케이션 컨텍스트에 제공(≒ 공용 data로 만듦) - App에서 provide 된 값을 이용하기 위해
inject 옵션에서 icons 등록
주의 사항
provide로 제공되는 객체는 기본적으로 반응성(Reactivity) 제공 X
즉, 공용 데이터를 변경하더라도 화면이 갱신되지 않음
반응성을 갖도록 하려면 Composition API가 지원하는 ref, reactive, computed 같은 API를 사용
일반적으로 Provide/Inject 기능에 반응성을 제공하는 것은 추천 X
읽기 전용으로 사용할 때만 적용하도록....
왜 ❓
공용 자원이기 때문에, 자식 중 한 놈이 데이터를 자주 변경하면 변경 사항을 추척하기가 어려움
728x90