React (5)

컴포넌트 연습하기

• Upload(Drag & Drop)
  input type="file"
  input 은 꾸밀 수 없음 ... toggle 처럼 숨겨서 사용
  input 에 대한 useRef 를 통해 엘리먼트에 직접 접근하도록 구현
• Badge
  알림 등이 쌓인 수를 보여주는 UI
• Icon
  보통 디자인 되어있는 걸 사용하지만, 디자인 된 아이콘이 없을 경우 만들어 사용 가능
  Feather icon opensource library ... 아이콘을 svg 로 출력해서 사용할 수 있음
  npm i feather-icons --save / yarn add feather-icons
img 태그로 사용하기 위해 base64 인코딩 필요
• Avatar
  보통 사용자의 프로필에 사용
• Slider
  볼륨 조절이나 비디오 요소들에 사용
• Divider
  요소를 위/아래, 좌/우로 나누는 용도로 사용
  

---

React (6)

컴포넌트 연습하기

• Skeleton
  로딩을 보여줄 때 사용 ... spinner 와 다르게 이곳에 컨텐츠가 있다는 것을 사용자에게 직관적으로 알려줄 수 있기 때문에 UX 측면에서 이점
• Flux
  Flux 를 이용한 레이아웃을 쉽게 만들기 위해 사용
• Breadcrumb
  현재의 위치를 어떠한 경로를 거쳤는지 알려주는 컴포넌트
• Tab
  페이지 이동 없이 컨텐츠를 스위칭 하기 위해 사용

---

사용자 정의 Hook 연습하기

• useHover
  특정 엘리먼트에 마우스를 올릴 경우 true, 벗어날 때 false 를 반환하는 hook
  툴팁 등을 구현하는데 사용할 수 있다.
• useScroll
  특정 엘리먼트의 스크롤 위치를 추적하는 hook
  

---

회고

😭😭😭😭😭😭😭😭😭😭😭😭😭
이부분이 너무 힘들었다..
어려운 부분이 많았고, vanilla JS가 탄탄하지 않음이 원인인 것 같다..
공식문서를 활용하며 공부하고 있는데, 문서를 한번 정독하는 시간을 가져야 할 필요성을 느꼈다.
react 팀 프로젝트를 앞두고 있는 상태에서 더 많이 준비해야겠다..