Props와 Provide/Inject 모두 부모컴포넌트에서 → 자식컴포넌트로 데이터를 전달하는 방법임
Props
가장 일반적인 방법이라 생각된다.
props는 단방향 바인딩(one-way-down binding) 방식을 사용한다.
즉, 아래와 같은 특징을 가진다.
1. 부모컴포넌트에서 자식컴포넌트로 props전송은 가능하지만,
자식컴포넌트에서 부모컴포넌트로의 props전송은 불가하다.
2. 부모컴포넌트가 재랜더링되거나 props로 전송하고 있는 데이터가 업데이트되면, 자식컴포넌트도 새로고침된다.
3. 자식컴포넌트에서 props로 받은 데이터를 변경할 수 없다는 뜻이다.
Provide/Inject
컴포넌트가 중첨되어 뎁스가 먼(깊은) 컴포넌트에 데이터를 전달하려고 할때, props만으론 데이터 전달이 힘든 상황이 생긴다.
왜냐하면 props는 바로 아래 있는 컴포넌트에만 데이터를 전송 가능하고, 멀리 떨어진 컴포넌트에 데이터를 전송하기 위해서는
해당 데이터를 필요로 하지 않는 나머지 컴포넌트들도 계속 상위컴포넌트에서 props를 받아서 하위컴포넌트로 data를 전송해줘야 하기 때문.
예를 들어 컴포넌트1에서 컴포넌트4로 데이터를 전송하고 싶다면
1. 컴포넌트1에서 props로 컴포넌트2로 데이터를 보내고,
2. 컴포넌트2에선 props로 받은 데이터를 다시 컴포넌트3로 props전송을 해야한다.
3. 컴포넌트3에서도 props로 받은 데이터를 다시 컴포넌트4로 props전송을 하고
4. 컴포넌트4에서 props를 받아 데이터를 쓰게되는것.
이렇게 되면 컴포넌트2와 컴포넌트3는 해당 데이터를 사용하지 않음에도 props를 받아 자식 컴포넌트로 전달함으로 코드가 지저분해지고 불필요한 코드가 생기게 된다.
이를 프롭스 체이닝 혹은 프롭스 드릴링 이라고 하며,
이를 해결하기 위해 대표적으로 redux나 vuex같은 상태관리라이브러리를 사용한다.
상태관리 라이브러리를 사용하는 방법 외에는 Provide/Inject가 있다.
상위컴포넌트에서 provide속성 안에 전달하고 싶은 데이터를 선언하고, 하위컴포넌트에서 inject로 받아서 사용한다.
provide/inject의 두 가지 중요한 특징이 있다.
- 부모 컴포넌트는 어떤 하위 컴포넌트가 provide된 속성을 사용하는지 알 필요가 없다.
- 자식 컴포넌트는 inject된 속성이 어디서 왔는지 알 필요가 없다.
이는 무작정 provide/inject만을 사용하지 않아야 하는 이유를 말해준다.
Summary
- provide/inject만 사용하면 데이터가 어디에서 어디로 가는지 추적하기 어려워 진다.
- props만 사용하면 멀리 떨어진 컴포넌트에게 데이터를 전달하는게 매우 불편하다.
Reference
https://velog.io/@ks1ksi/Vue-Provide-Inject-vs-Props
https://ko.vuejs.org/guide/component-provide-inject
