Vue 3 + TypeScript에서 Provide/Inject 패턴 사용 경험에 대해 궁금합니다

Question

Vue 3 &#43; TypeScript에서 Provide/Inject 패턴을 사용하려고 하는데, 실제로 다른 회사들에서는 이 패턴을 많이 사용하시나요? TypeScript와 함께 사용할 때의 경험이나 장단점에 대해 공유해주시면 감사하겠습니다!

컴포지트 · Answer

보기 힘들걸요... Context 패턴을 쓰는 곳은 네이버같은 전문적 아니면 보기 힘들겁니다.대부분은 vuex 기반 아직도 쓰고 있고 pinia 조차도 보기 힘든데요 뭐...그놈의 &#64;vue/compatProvide/Inject 는 prop drilling 에 대응하기 위해 설계된 기능입니다.주로 자신의 부모와 자식의 정체성 확립이 필요한 컴포넌트에 쓰입니다.가장 대표적인 예시로, 자식 컴포넌트에서 부모 컴포넌트에 제약을 걸때, 난 이 부모 컴포넌트 아래 아니면 안 된다! 이럴 때 쓰이는게 기초적인 사용법입니다.이건 React, Svelte 도 마찬가지입니다.특히 Vue는 컴포넌트 인스턴스 접근과 함수 실행이 가능하지만 React, Svelte 는 그게 안되기 때문에 절실한 기능이죠.

일랑이유리 · Answer

제경우 부트스트랩형 Tab을 패킹하면서 그거썻었어용TabGroup 안에다수의 Tab 컴포넌트를 동적으로 헤더와 바디를 구성해야하는상황에서TabGroup 내부의 헤더 엘리먼트를 ref 로 감싸서 provide 등록후개별 Tab 컴포넌트에서 inject 해서 접근해서 그 헤더 엘리먼트에 탭제목을 추가하는방식으로 구현했어요

Vue 3 + TypeScript에서 Provide/Inject 패턴 사용 경험에 대해 궁금합니다

2개의 답변

Q&A 목록