평소에 하던 의존성 주입

전역상태관리 모듈을 사용하지 않을 때의 방법

리액트를 사용할때 평소에 하던 의존성 주입으론 index.js파일에서 의존성 객체를 만들어서 해당 객체를 필요로하는 컴포넌트로 props로 전달했다.

1. 만약 의존성을 필요로하는 컴포넌트가 컴포넌트 구조에서 말단에 있다면 의미없이 props가 전달. 전달. 전달...
2. 추가로 의존성이 추가되면 의미없이 전달되는 props가 하나더 전달..

이런 문제를 가지고 있었다.

그런데 그냥 의존성을 필요로하는 컴포넌트 자체를 index.js파일에서 만들어 버리면?
거기서 바로 의존성도 주입받으면되잖아.!

// index.js

const service = new service(); // 의존성 객체
const NeedComponent = (props) => (
  <NeedComponent {...props} service={service} />
);

index.js에서 의존성 주입하는 컴포넌트를 import해와서 사용하는 방법이다.

이렇게되도 이 컴포넌트를 필요로하는 다른 컴포넌트에 전달하려면 props로 계속 전달, 전달, 전달.. 해야하는건 똑같다.
위에서 생각하던 2의 문제는 해결이 된다.

이 NeedComponent에 다른 의존성 객체가 추가가되면

const service = new service(); // 의존성 객체
const anotherService = new anotherService(); //또다른 의존성 객체
const NeedComponent = (props) => (
  <NeedComponent {...props} service={service} anotherService={anotherService} />
);

이런식으로 추가가 쉽기 때문이다.

참고로 NeedComponent를 저렇게 인자가 props인 함수로 받은 이유는 확장성, 즉 재사용성 때문이다

결론

• 주입할 의존성만 props로 전달하는 방법외에 의존성 객체를 주입할 대상인 컴포넌트 자체를 props로 전달하는 방법도 존재하구나.