1.0.0 • Published 4 years ago

@nooks_sw/use_title v1.0.0

Weekly downloads
-
License
MIT
Repository
github
Last release
4 years ago

10 Hooks for React practice

0. INTRODUCTION

  • #0.2ntroduction to Hooks
  • #0.3 Requirements
  • #0.4 Workflow

1. USESTATE

2. USEEFFECT

  • #2.0 Introduction to useEffect
  • #2.1 useTitle
  • #2.2 useClick
  • #2.3 useConfirm & usePreventLeave
  • #2.4 useBeforeLeave
  • #2.5 useFadeIn & useNetwork
  • #2.6 useScroll & useFullscreen
  • #2.7 useNotification
  • #2.8 useAxios
  • #2.9 Conclusions
    • 리액트 내장 훅 또는 vanilla React로 Crazy Creative 커스텀 훅을 만들어보자
    • "Use Hooks, Use Your Brain!"-Nicolas,Nomad Coder
  • #2.10 Publishing to NPM
  • #2.11 That to learn next

Custom Hooks what we're making

Collection of React Hooks ready to install with NPM

  • useTitle : React doc title 을 hook과 함께 바꾸는 것
  • useInput : input역할
  • useBeforeLeave : 유저가 페이지를 벗어나는 시점을 모니터하고 함수 실행
  • useClick : 클릭 시점 모니터
  • useFadeIn : 어떤 element든 애니메이션을 element안으로 fade in 하게 함
  • useFullscreen : 어떤 element든 Full screen으로 만들거나 다시 돌아가게 함
  • useHover : 호버 시점 모니터
  • useNetwork : 온/오프라인 상태 감지
  • useNotification : Notification API 사용시 알림 보냄
  • useScroll : 스크롤 모니터
  • useTabs : 탭을 편리하게 만들어줌
  • usePreventLeave : 변경사항을 저장하지 않고 페이지를 벗어나도록 함
    • actually It's not a react hook as not to use useEffect or useState
  • useConfirm
    • actually It's not a react hook as not to use useEffect or useState
  • useAxios

IDE

  • CodeSandbox
    • VSC와 server등이 준비되어있는 환경
    • 소스코드 변경사항이 live build된다.
    • 이번 강의에서 로컬 editor는 완성된 hook을 가져와서 npm에 업데이트 하는 용도로 사용한다.