2. Tsyringe

• TypeScript용 DI 도구(IoC Container)

• Tsyringe를 이용해 store를 만들어 prop drilling을 막아보자

DI

• 의존성을 외부(IoC container)에서 결정해주는 것

• 클래스에 대한 의존성의 인터페이스화

• 인스턴스를 외부에서 생성하여 주입해주는 것

• 여러 클래스 간의 의존관계가 있으면 한 클래스가 바뀔 때 다른 클래스가 영향을 받게 됨

• 클래스간의 결합도가 약해져 한 클래스가 변경될 때 다른 클래스가 변경될 필요성이 낮아짐

reflect-metadata

• 데코레이터(@)를 이용해 함수에 대한 정보(메타데이터)를 추가할 수 있음

• 여러가지 메소드와 데코레이터를 추가해 메타데이터를 추가할 수 있음

싱글톤 패턴

• 인스턴스가 오직 하나만 생성되어야 하는 케이스에 사용하는 패턴

• 여러 스레드에서 동시에 접근해도 문제가 없도록 동시성을 고려해야함

• @singleton 데코레이터를 통해 타입스크립트에서 사용 가능

실습 내용 정리

• 카운터 값을 보여주는 <Counter/> 컴포넌트

• 카운터 값을 증가하거나 감소시킬 수 있는 버튼을 가지는 <CounterController/> 컴포넌트

• 두 컴포넌트는 useCounterStore 훅을 이용해서 store에 있는 count값에 접근할 수 있음

• store는 CounterStore 싱글톤 클래스를 tsyringe 컨테이너에 저장해서 사용(어디서든지 하나의 CountStore 인스턴스를 사용할 수 있도록 tsyringe가 알아서 처리해줌)

• CounterStore 클래스가 리스너 셋에 forceUpdate를 등록해두고 count값이 변경될 때마다 publish로 리스너를 호출해주면 상태 변경시 리렌더링 할 수 있음