UI 프레임워크
버튼하나 input하나를 라이브러리로 불렀으면
그런 많은 기능들을 모아서 하나의 완성된 덩어리를 프레임워크라고함
시간절약이 가능하고
버그가 최소화된다
npm publish 를 사용해서 만든기능을 올릴 수 있음.
라이브러리는 배워도 최신 라이브러리가 계속나옴
공식문서를 통한 라이브러리 습득력을 키우는게 중요함
UI 프레임워크
여기서는 안트 디자인을 보도록 하자
우상단의 components 를 들어가 보면
수많은것들이 있음.
필요한것들을 찾아서 import만 하면 바로바로 사용이 가능함.
적용해보기
아이콘을 한번 적용해보자
먼저 yarn add로 해당 기능을 설치해 주고
사용해보고 싶은 아이콘을 클릭하면 복사되었다는 표시가뜸
복사한것을 붙여넣고 해당 태그를 import하면
적용된 모습
이런식으로하면 받아온 아이콘을 꾸며줄 수 있다.
또한 해당 아이콘을 버튼으로 특정 기능을 넣기위해
이런식으로 하면 id를 받아올것 같지만
실제로는 아무리 클릭해도 받아오지 못한다.
내용을 까보면 아이콘은 svg태그에 있는데 span 태그가 감싸고 있고
id는 span 태그에 적용되어있음.클릭은 svg태그를 클릭하기에 id값을 제대로 못갖고 오는것.
이때 하는 방법 = 이벤트 버블링을 응용해서
div로 감싸서 currentTarget을 사용해서 가져오면
정상적으로 가져온다.
