CDD
Component Driven Development
부품단위로 UI 컴포넌트를 만들어 나가는 개발 방법
CSS-in-JS
자바스크립트에서 CSS를 작성하는 방식
CSS도 컴포넌트 영역으로 불러들일 수 있게 됨
상태가 변경되면 자바스크립트의 CSS 코드를 읽어와 파싱하는 단계부터 시작한다.
따라서 CSS-in-CSS에 비해 CSS 적용이 느리다.
CSS-in-JS 이전
HTML+JS: 컴포넌트
CSS: 스타일링
컴포넌트 + 스타일 = 웹 애플리케이션
프로젝트의 규모가 커지고 복잡해지면서 CSS를 컴포넌트 단위로 관리하게 됨
Storybook
UI 개발 도구
컴포넌트 시각화 & 문서화
컴포넌트 재사용성, 테스트, 개발 속도를 향상시킬 수 있다.
npm run start를 하지 않더라도 컴포넌트 작동 여부 등을 확인할 수 있다.
---> 개발 환경에 종속되지 않는다.
storybook만 배포할 수도 있다.
useRef
react에서 DOM 엘리먼트에 접근할 수 있게 하는 Hook 함수
컴포넌트가 re-render 되어도 담고 있는 주소값이 변하지 않는다.
styled-components
GlobalStyle does not render children
최상위에 self-closing 또는 opening, closing 태그 각각을 위치하게 할 것
이벤트 버블링
자식태그일 때 부모태그의 이벤트가 적용되는 현상
onClick={(e) => e.stopPropagation()}stopPropagation() 메소드로 전파를 방지한다.
Event 인터페이스의 stopPropagation() 메서드는 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지합니다. 전파를 방지해도 이벤트의 기본 동작은 실행되므로, stopPropagation()이 링크나 버튼의 클릭을 막는 것은 아닙니다. 이런 기본 동작을 방지하려면 preventDefault() 메서드를 사용하세요. 또한, stopPropagation()은 같은 이벤트 대상에 부착한 다른 수신기까지 막지는 않습니다. 이것까지 막으려면 stopImmediatePropagation()를 사용하세요. -mdn
