메로그

스토리북8.x이상 에서 React Router v6 이상 버전을 사용시에 스토리북에 있는 공통 컴포넌트들에서 라우팅 사용 관련 에러가 발생하는 경우가 있습니다. // 에러 문구 useNavigate() may be used only in the context of a component.에러가 발생하는 원인은 무엇인가?1. React Router 의 훅들을 사용하기 위해서는 라우터가 필요합니다. 2. 스토리북은 파일 서버 기반의 환경과 컴포넌트를 독립적으로 사용하는 특성으로 인해 라우터를 제공하지 않습니다. 3. 이를 해결하기 위해 createMemoryRouter 를 이용하여 메모리 라우터를 별도로 만들고 스토리북에 직접 라우터를 제공합니다. 이를 이용하면, 브라우저의 URL 을 변경하지 않아도 메모리에..

리액트에서 컴포넌트로 개발하다 보면, 컴포넌트를 만들어서 재사용하면서 애플리케이션을 만들게 됩니다.그렇다보면, 테스트, 관리포인트를 좀 더 잡고 싶은 경우가 발생하는데 그럴 때 사용하는게 스토리북입니다.StoryBook 왜 쓸까요?StoryBook은 한 줄 요약해서 UI 컴포넌트를 관리, 테스트를 도와주는 도구 입니다.1. 정리하고 설명 요약하는데 편리함.2. 재사용성을 고려한 디자인 & 개발 가능 -> 퍼블리셔, 디자이너 등이 편해짐.3. 테스트 용이 그렇다 보니, 개발자들한테는 불필요한 작업을 줄여줌과 동시에 컴포넌트 단위의 테스트가 가능해집니다.StoryBook 싸이트에 들어가서 showcase 를 들어가면 다른 서비스에서 어떤 식으로 사용하고 있는지 알 수 있습니다.StoryBook 설치 및 사용..