React Hooks 20.09.16

훅 사용 시 지켜야 할 규칙

1. 하나의 컴포넌트에서 훅을 호출하는 순서는 항상 같아야 한다.

• if, for문 안에서 사용 금지
• 함수 안에서 사용 금지

2. 훅은 함수형 컴포넌트 또는 커스텀 훅 안에서만 호출되어야 한다.

React Hooks : functional component에서 state을 가질 수 있게 해줌.

1. useTitle : react document의 title을 몇 개의 hooks와 함께 바꾸는 것.

2. useInput : input 역할

3. useBeforeLeave : 유저가 page를 벗어나는 시점을 발견하고 함수를 실행한다.

4. useClick : 누군가 element를 클릭하는 시점을 발견한다.

5. useFadeIn : 어떤 element든 상관없이 애니메이션을 element 안으로 서서히 사라지게 만든다.

6. useFullscreen : 어떤 element든 풀스크린으로 만들거나 일반 화면으로 돌아가게 한다.

7. useHover : 어떤 것에 마우스를 올렸을 때 감지한다.

8. useNetwork : online 또는 offline 상태인지를 감지한다.

9. useNotification : notification API를 사용할 때 유저에게 알림을 보내준다.

10. useScroll : 스크롤을 사용할 때를 감지해 알려준다.

11. useTabs : 웹사이트에 메뉴 또는 무엇이든간에 tab을 사용하기 매우 쉽게 만들어주는 것이다.

12. usePreventLeave : 유저가 변경사항이나 무엇이든간에 저장하지 않고 페이지를 벗어나길 원할 때 확인을 한다.

13. useConfirm

14. useAxios : HTTP requests client axios를 위한 wrapper

Introduction to useState

useState : array 안의 2개의 value를 return
(this, setState 등 쓰지 않아도 된다.)