2. TSyringe

TSyringe란?

TSyringe 는 가벼운 DI 컨테이너이다.

TypeScript용 DI도구(IoC Container(제어의 역전))이며, External Store를 관리하는데 활용 가능 하다. React에서 문제가 되는 Prop Driling 문제를 우아하게 해결할 수 있다.

DI란?(Dependency Injection - 의존성 주입)

소프트웨어 공학에서 중요한 개념 중 하나로, 클래스나 모듈이 필요로 하는 의존성을 직접 생성하거나 관리하는 것이 아니라 외부에서 의존성을 주입 받는 방식을 의미한다.

예를 들어 서비스 클래스가 데이터베이스 엑세스 객체를 사용하여 데이터베이스에 접근할 때, 서비스 클래스는 데이터베이스 엑세스 객체에 의존하고 있다.

DI는 이러한 의존성을 외부에서 주입받도록 설계함으로써, 코드의 결합도를 낮추고 응집력을 높인다.

• Coupling(결합도)

  • 두 모듈 간의 상호 의존성.

  • 결합도가 낮을수록 모듈 간의 의존성이 적어져 모듈의 변경이 다른 모듈에 미치는 영향이 줄어듬.

  • 결합도가 높으면 모듈 간의 의존성이 강해져, 하나의 모듈을 변경할 때 다른 모듈에 영향을 미칠 가능성이 높아짐

• Cohesion(응집력)

  • 모듈 내부의 요소들이 서로 관련된 기능을 수행하는 정도.

  • 높은 응집력은 한 모듈이 하나의 기능에 집중되어있고, 다른 기능과는 독립적으로 동작.

  • 낮은 응집력은 모듈 내의 요소들이 서로 다른 목적을 위해 혼합되어 있거나, 관련없는 기능을 수행할 수 있음을 나타내어, 유지보수가 어렵고 재사용성이 낮을 가능성이 높다.

---

설치 및 설정

npm i tsyringe reflect-metadata

main.tsx

앱이 시작되는 부분에 reflect-metadata 임포트 시켜준다. src/setupTests.ts 파일도 있다면 시작점에 똑같이 임포트 시켜준다.

import 'reflect-metadata';

tsconfig.json

Tsyringe 에서 데코레이터를 사용하기 때문에, tsconfig.json 코드 변경

{
  "compilerOptions": {
    ...
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true
    ...
  }
}

---

Store 클래스를 만들어 count 변수의 관리와 UI 업데이트를 해보자

// scr/stores
import { singleton } from 'tsyringe';

type Listener = () => void;

@singleton()
export default class CounterStore {
  count = 0;

  // 외부 forUpdate 를 등록하는 용도
  // set 을 한 이유는, 다른 컴포넌트에서 같은 forceUpdate 를 등록했을 때 덮어쓰는 것을
  // 방지하기 위함이다.
  listeners = new Set<Listener>();

  // 외부에서 받아온 forUpdate 를 실행하는 용도
  publish() {
    this.listeners.forEach((listener: Listener) => listener());
  }

  // 비지니스 로직
  // 전역같이? 관리되는 클래스의 멤버변수를 업데이트 한 후에,
  // publish 를 통하여 forceUpdate 를 실행하여, 컴포넌트를 강제로 리렌더링한다.
  increase() {
    this.count += 1;
    this.publish();
  }

  // 비지니스 로직
  decrease() {
    this.count -= 1;
    this.publish();
  }

  // 리스너(forceUpdate 함수) 를 등록하기 위한 메서드
  addListener(listener: Listener) {
    this.listeners.add(listener);
  }

  // 리스너(forceUpdate 함수) 를 등록해제하기 위한 메서드
  deleteListener(listener: Listener) {
    this.listeners.delete(listener);
  }
}

Store 클래스를 사용하는 곳에서는 훨씬 더 간편하게 사용할 수 있다.

import useCounterStore from '../hooks/useCounterStore';

export default function CounterControl() {
  const store = useCounterStore();

  const handleIncrease = () => {
    store.increase();
  };

  const handleDecrease = () => {
    store.decrease();
  };

  return (
    <div>
      <p>{store.count}</p>
      <button type='button' onClick={handleIncrease}>
        Increase
      </button>
      <button type='button' onClick={handleDecrease}>
        Decrease
      </button>
    </div>
  );
}

import useCounterStore from '../hooks/useCounterStore';

export default function Counter() {
  const store = useCounterStore();

  return (
    <div>
      <p>Count {store.count}</p>
    </div>
  );
}