[ TIL ] 2022 05 03

React

• classNames 라이브러리

  변수에 따른 className 을 적용해야 할 때 편하게 사용할 수 있는 라이브러리다

• event.target VS event.currentTarget

  e.target 은 클릭한 자식 요소를 반환하지만, e.currentTarget 은 이벤트가 부착된 부모 핸들러를 반환한다. 후자를 쓰는 것이 좋다.

• key 값으로 index 사용 지양

  공식 문서에도 나와 있다. 굳이 index 를 써야겠다면 list-data${index} 등으로 사용하는 것이 좋다.
  린터에서 map 내부 key 로 index 쓰는 것을 강제로 막는다면, 외부에서 const key = list-data${index} 로 선언 후 사용하면 된다

• react-use 라이브러리

  useOnClickOutside, useClickAway, 등등 유용한 Hook 이 많다
  https://github.com/streamich/react-use

• innerText 는 위험하다

  dataset 등으로 대체하는 것이 지향된다

• 변치않는 상수는 컴포넌트 밖으로 빼는 게 좋다

  굳이 다시 만들어지지 않도록 하는 것

• 컴포넌트는 파스칼 케이스

CSS

• focus-within

  https://developer.mozilla.org/ko/docs/Web/CSS/:focus-within
  form 에 focus 이벤트 CSS 를 적용하고 싶을 때 form:focus-within 으로 사용할 수 있다

• svg 는 거대한 파일을 제외하고는 컴포넌트로 만들어 사용하자

  assets 폴더 안에 svg 파일들을 컴포넌트 형태로 관리하면, import 해와서 className 등을 적용하기가 좋다

• line-height 를 써서 위, 아래를 맞추고, padding 은 양옆으로만 줘라

  정렬하기가 편해진다

• svg pointer-events

더 알아볼 것

• email.target.validity 등 validity 사용법

• svg 는 background 로 적용하기 보다, 이미지로 적용하는 게 번들링에 좋다?

• dataset 활용 통한 InnerText 사용 지양하기