BEING JAZZER 를 만들면서 메트로놈 기능울 구현했었는데, 이를 나중에 꼭 라이브러리 컴포넌트로 만들어서 배포해보고 싶다는 생각을 했었다.
현재 리액트 메트로놈 컴포넌트 같은 경우 가장 최근에 나온것이 2년전인거 같고, 이마저도 리액트 16버전과 호환이 되고 있는것 같다.
이를 리액트 18버전과 호환되도록 만든다면 필요하신 다른 분들도 사용하실수 있을뿐더러 공부도 해볼수 있지 않을까? 라는 생각이 들었다.
rollup 에 관하여 기본적으로 공부를 해보았고, 한번 이제 직접 만들어보면서 배우는게 나을것 같아서 만들어보려고 한다.
컴포넌트를 일체형으로 만들것인가 ? 아니면 분리해서 만들것인가 ? 에 대해서 일차적인 고민을 했었는데,
메트로놈을 제어하는 버튼, 그리고 bpm을 입력할수 있는 인풋 컴포넌트, 그리고 해당 상태값을 전체적으로 공유하는 Context 총 3가지로 나누기로 했다.
(사용자 입장에서 Provider 까지 import 하는것이 너무 비효율적인것 같다는 판단을 했었다.
그래서 hoc 를 이용해 해당 컴포넌트들을 한번 감싸줘서 export 해주면 되지 않을까? 라는 생각을 했었는데 그래도 번번히 실패했다. 아직 그 해결책을 찾지는 못했다. 어떻게하면 Provider 없이 상태값을 공유해줄수 있을까 ?)
- MetronomeProvider.tsx
function MetronomeProvider(props: PropsWithChildren<object>) {
const { children } = props;
const [isPlaying, setIsPlaying] = useState(false);
const metronomePlayHandler = () => {
setIsPlaying((prevIsPlaying) => !prevIsPlaying);
};
return (
<MetronomeContext.Provider value={{ isPlaying, metronomePlayHandler }}>
{children}
</MetronomeContext.Provider>
);
}
export default MetronomeProvider;- MetronomeButton.tsx
function MetronomeButton(props: MetronomeButtonProps) {
const { className = "", buttonTexts = ["재생", "일시정지"] } = props;
const { isPlaying, metronomePlayHandler } = useMetronome();
return (
<>
<button className={className} onClick={metronomePlayHandler}>
{isPlaying ? buttonTexts[1] : buttonTexts[0]}
</button>
</>
);
}
export default MetronomeButton;- Metronome.tsx
function Metronome(props: MetronomeProps) {
return (
<input
// input props 들...
/>
);
}
export default Metronome;만들고 있는 라이브러리 컴포넌트를 테스트 해보기 위해서 직접 publish를 했다가 그걸 계속 다운받으면서 사용해주어야하나 ? 라고 걱정했었다.
하지만 npm link라는 것에 대해서 알게 됐다.
- npm link
npm link 란 로컬에서 개발중인 패키지를 마치 이미 배포가 완료 된것처럼 사용해볼수 있도록 해주는 명령어이다.
이를 통해서 직접 npm 에 배포하지않고도, 로컬 내에서 테스트를 진행해볼수 있다.
- 개발 중인 컴포넌트 내에서
npm link- 테스트 하려고 하는 프로젝트 내에서
npm link 패키지명만들다보니 계속 리액트 훅과 관련된 에러가 나왔었다.
검색을 해보니, 문제는 react와 react-dom을 외부 의존성으로 처리를 안해주었기 때문이었다.
외부 의존성 처리를 해주지 않는다면, rollup은 해당 컴포넌트를 빌드할때, 최종 번들에 포함시킨다.
이는 라이브러리 자체의 사이즈도 키울뿐더러, 의존성 충돌로 인해서 에러가 발생할 확률이 커진다.
그렇기때문에 외부 의존성 설정을 꼭 해주어야한다.
external: ["react", "react-dom"],- 직접 import 해온 화면
- 더 보완해야할점
- Context Provider 없이 isPlaying 의 값을 어떻게 전역적으로 공유해줄수 있을것인가 ?
- 사용자 입장에서 metronomeCount의 상태값을 받아서 처리해야할 일이 있을텐데, 어떻게 해줄수 있을것인가 ?
- 테스트코드 작성하기
- 메트로놈 자체의 소리를 조절할수 있는 기능 추가하기
