[React] Custom Component-2

과제 - React Custom Component
1.Styled Components를 활용해 다양한 기능의 커스텀 컴포넌트를 구현할 수 있다.
2.Storybook을 사용해 컴포넌트들을 관리할 수 있다.

1.Styled Components를 사용해 Modal, Toggle, Tab, Tag 컴포넌트를 구현했다.
 Modal의 경우는 새로운 레이아웃을 페이지 위에 띄운 후 기존에 있던 외부 전역에는 rgba값으로 흐릿하게 보이는 효과를 줘서 구현했으며 useState를 통해 isOpen을 관리해 조건부 랜더링을 하는 방식으로 값을 표현했다. 마지막으로 모달이 띄워진 경우 표시될 백그라운드 Styled Component에는 !isOpen 핸들러를 할당해 외부 아무곳이나 클릭해도 모달이 종료되게 표현했다.
 
 Toggle의 경우 상태를 isOn으로 관리해 클릭될 경우 !isOn으로 반대방향으로 이동하게 만들었다.
 
 Tab의 경우 map으로 탭을 뿌려줬으며 현재 선택된 핸들러에 index를 전달해 선택된 index와 상호작용(이 경우에는 index에 해당하는 내용의 content 표시)을 할 수 있게 했다.

 Tag는 useState로 관리하며 CRUD를 관리하듯 데이터를 추가, 삭제하는 방식으로 구현했다. 난이도가 가장 높아보이지만 의외로 평소에 하던 것과 유사했기 때문에 가장 쉽게 진행할 수 있었다.
 
2.굳이 Storybook을 이용해 컴포넌트를 관리해야 하는 이유를 아직도 모르겠다.

월요일에도 진행되는데 월요일에는 CSS와 어드밴스드를 해결해봐야겠다.