React용 필수 라이브러리

곰튀김·2023년 1월 11일
0
post-thumbnail

React 기반 프로젝트 할 때 (당연히 Typescript) 필수로 설치해야할 라이브러리들. 주류 라이브러리들은 아니지만, 이것들을 조합해서 쓸만한 프레임워크 환경을 꾸밀 수 있다.

이 라이브러리들은 react-web, react-native 에서 사용해 봤고 잘 동작하는 것을 확인했다.

1. react-service-locator

컴포넌트는 직접 생성이 불가하기 때문에 생정자 주입보다는 Service Locator 패턴을 사용할 수 밖에 없다.
ServiceLocator 패턴을 활용해서 annotation 으로 DI 환경을 제공해 준다.

// AAA.ts
@Service()
class AAA {
}

// BBB.ts
class BBB {
  @Inject(AAA)
  private readonly aaa: AAA!;
}

컴포넌트에서는 hook으로 주입받기

// CCC.tsx
const CCC: React.FC = () => {
  const aaa = useService(AAA);
}

2. react-state-proxy

MVVM 환경에서 VM 와 V인 React컴포넌트간의 Binding이 필요한데. mobx나 zustand 등을 사용했었다. 그 중에 이게 그냥 젤 간편한것 같다. 아무 설정 없고 hook 을 사용해서 일반 클래스의 값의 변화를 감지해서 업데이트 해준다.

@Service()
class SSS {
  count: 0;
}

const CCC: React.FC = () => {
  const sss = stateProxy( useService(SSS) );
  
  return (
	<div>
      {sss.count}
      <button onClick={() => sss.count++}>HIT</button>
    </div>
    
  )
}

그냥 stateProxy만 사용해서 object 를 observing 할 수 있지만, useService 와 함께쓰면 VM을 주입받아 observe 하게 된다.

3. builder-pattern

TypeScript 에서 객체 생성할 때 Builder 패턴을 적용할 수 있게 해준다. Model 객체를 생성할 때 사용하면 유용하다.

class MMM {
  name: string;
  level: number;
}

const m = Builder<MMM>()
            .name('X');
            .level(9);
            .build();

이것 저것을 적절하게 섞어서 잘 구성하면 좋은 프레임워크가 나올것 같다.
nest.js 환경이 많이 좋아보이더라. 나중에 저 환경만 꺼내와서 따로 구성해 봐야지.. 하다가 그냥 기존의 이것저것을 섞으면 되지 않을까 해서 구성해 봤다.

react web 프로젝트 뿐 아니라 react-native 프로젝트 하면서도 적용해 보니까 잘 동작했다. 쓸만하다.

profile
사실주의 프로그래머

0개의 댓글