12장 오류 #9
Description
471 page
- 이것으로 12장에서 개발할 블로그 앱 프로젝트의 사양을 파악하고, 할 일 목록 앱의
+ 이것으로 12장에서 개발할 블로그 앱 프로젝트의 사양을 파악하고, 블로그 앱의 디자인을 아토믹 디자인을 통해 컴포넌트로 나누고 분리하는 작업을 해보았다. 537 page
스토리북 V7인 경우 다음과 같은 내용은 불필요합니다.
- 이렇게 <RegisterBlogDialog /> 컴포넌트를 수정하고 저장한 후 브라우저를 이동하여 스토리북 화면 하단의 “Actions” 탭을 선택한 다음 “닫기” 버튼을 클릭해 보면,[그림 12-75]와 같이 아무런 로그가 화면에 표시되지 않는 것을 확인할 수 있다.
- 이는 우리가 <RegisterBlogDialog /> 컴포넌트에는 필수 Props를 설정했지만, 컴포넌트의 스토리 파일에서 이 Props를 사용하도록 수정하지 않았기 때문이다.
+ 이렇게 <RegisterBlogDialog /> 컴포넌트를 수정하고 저장한 후 브라우저를 이동하여 스토리북 화면 하단의 “Actions” 탭을 선택한 다음 “닫기” 버튼을 클릭해 보면,[그림 12-75]와 같이 onClose 이벤트가 잘 표시되는 것을 확인할수 있다.[그림 12-75]대신 [그림 12-76]을 사용해야 함.
538 page
스토리북 V7인 경우 다음과 같은 내용은 불필요합니다.
- 이제 <RegisterBlogDialog /> 컴포넌트의 스토리 파일을 수정하여 사용자가 “닫기” 버튼을 클릭했을 때에 해당 이벤트가 스토리북에 잘 표시되도록 수정해보자. <RegisterBlogDialog /> 컴포넌트의 스토리 파일인 ./src/components/organisms/RegisterBlogDialog/index.stories.tsx 파일을 열고 다음과 같이 수정한다.
- ...
- const Template: ComponentStory<typeof RegisterBlogDialog> = (args) => (
- <RegisterBlogDialog {...args} />
- );
- <RegisterBlogDialog/> 컴포넌트의 필수 Props를 전달받기 위해 Template을 수정했다. 다른 예제와는 다르게 <RegisterBlogDialog /> 컴포넌트의 필수 Props가 onClose 이벤트 함수 하나만 존재하기 때문에 Default 스토리에 해당 Props값을 설정하지 않았다.
- 이와 같이 <RegisterBlogDialog /> 컴포넌트의 필수 Props를 사용하도록 스토리 파일을 수정하고 저장한 후 브라우저로 이동하여 “닫기” 버튼을 클릭해 보면, [그림 12-76]과 같이 이전과는 다르게 onClose 이벤트가 잘 표시되는 것을 확인할 수 있다.[그림 12-76] <RegisterBlogDialog /> 유기체 컴포넌트 제거.