Introduction to Hooks

npm을 사용하면서 react hook을 이용한 개발도 활발하게 공개되고 있다. 그중 react hook중 대표적인 hooks을 배워볼 것이고 npm에 배포할 hook은 다음과 같다.

• useTitle — react doc의 title을 몇개의 hooks와 바꾸는 것이다.
• useInput — 그냥 input역할을 한다.
• usePageLeave — 유저가 page를 벗어나는 시점을 발견한다.
• useClick — 유저가 element를 클릭하는 시점을 발견한다.
• useFadeIn — 어떤 element이든 애니메이션 element안으로 서서히 사라지게 한다.
• useFullscreen — 어떤 element이든 풀스크린으로 만들거나 일반화면으로 돌아가게 한다.
• useHover — 어떤것에 마우스를 올렸을때 감지한다.
• useNetwork — Online상태인지 Offline상태인지 감지한다.
• useNotification — notification API를 사용할때 유저에게 알림을 보내준다.
• useScroll — 스크롤을 사용할 때를 감지한다.
• useTabs — 웹사이트에 메뉴나 다른 무엇이든 tab을 사용하기 매우 쉽게 만들어준다.
• usePreventLeave — 유저가 변경사항이나 어떠한 상황이든 저장하지 않고 페이지를 벗어나기 원할때 확인한다.
• useConfirm — usePreventLeave과 비슷하지만 추가적인 기능이 있다.
• useAxios — HTTP equests client axios를 위한 wrapper이다.

Hooks를 만들기전에 hook의 이론적인걸 배운다음 npm에 package로 배포하는 과정을 거칠것이다. react의 hook 기술이 얼마나 좋은지 이 강의를 통해서 알게 될 것이다.

Workflow

Hooks를 구현하기전에 개발환경을 web에서 코딩할 수 있는 code sandbox에서 진행할 것이다. 개발이 완료된 hook을 vscode에서 동작하는지 확인하고 배포하는 순서로 진행한다.

우선 sandbox를 가입하고 react project를 생성한다. 그리고 ctrl + s를 눌러 프로젝트를 저장하는데, 저장한 프로젝트는 고유의 URL주소를 갖게하고 우측 nav에 sandbox info를 클리갛여 project의 이름을 수정한다.