1.0.0 • Published 4 years ago
@nooks_sw/use_title v1.0.0
10 Hooks for React practice
0. INTRODUCTION
- #0.2ntroduction to Hooks
- #0.3 Requirements
- #0.4 Workflow
1. USESTATE
- #1.0 Introduction to useState
- #1.1 userInput
- #1.2 userInput part Two
- #1.3 useTabs
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에 업데이트 하는 용도로 사용한다.
1.0.0
4 years ago