이벤트 버블링(EventBubbling)
이벤트 버블링이란 어떤 이벤트가 실행되었을 때, 그 이벤트가 자식 태그 뿐만 아니라 부모 태그까지 실행이 되는 것이다.
이럴 때 문제점이 생기는데, 이벤트는 전파가 되지만 자식 태그의 id 값을 부모 태그에 넘겨주지 못한다.
이러한 문제를 해결하기 위해서는 기존에 사용하던 event.target.id가 아닌 event.currentTarget.id를 사용하면 된다.
currentTarget은 이벤트 실행이 시작되는 태그의 id를 선택할 수 있게 해준다.
반대로, 부모 컴포넌트를 클릭했을 때 자식 컴포넌트로 이벤트가 전파가 되는 이벤트캡처링도 있다.
자식 컴포넌트를 다른 파일에서 사용할 때도 그대로 부모 컴포넌트까지 이벤트가 발생된다. 그런 문제점을 막아주기 위해서 이벤트 버블링이 일어나지 않도록 event.stopPropagation을 적어주는 방법도 있다.
eslint / prettier
대표적인 코드 린터와 코드 포멧터로는 eslint와 prettier이 있다.
린터란, 여러 명이 같이 개발을 할 때 에러는 아니지만 사람마다 규칙이 다 다른 경우 코드가 중구난방이 될 수 있는데 그럴 때 코드 규칙을 통일시켜주는 역할을 한다.
ex) import 순서, == 금지, === 허용
코멧터도 규칙이지만 어떻게 보기 좋게 보여줄지를 정해주는 것이다.
ex) 들여쓰기 2칸, 특정 길이가 넘으면 줄바꿈
파일에 숨어있는 에러들을 찾으려면 터미널에서 npx eslint . 을 입력해주면 된다.
에러 검사를 하지 않을 파일은 .eslintignore이라는 파일을 만들어서 그 안에 검사하지 않을 파일의 경로를 적어주면 된다.
Husky
husky는 eslint 검사 후 에러가 있을 경우, git에 commit을 하지 못하도록 막아주는 도구이다.
UI 프레임워크
라이브러리와 프레임워크의 차이는 뭘까?
예를 들어, 특정 도구 하나인 경우는 라이브러리, 도구 모음은 프레임워크이다.
대표적인 프레임워크로는 ant-design, Material-UI가 있다.
라이브러리/ 프레임워크를 사용하는 이유
1. 시간 절약
2. 버그 최소화
