노마드 코더 실전형 리액트 Hooks 10개 강의 들으며 정리하는 글

Hook이란?
functional component에서 state를 가질 수 있게 해줌.
class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줌. ex)useState, useEffect
-> 함수형 프로그래밍 스타일이 된다, 간결하게 사용 가능

useState

useInput

initial value 하나 받음

const [value, setValue] = useState(initialValue);

{... 변수} 이런 형식으로 안에 있는 거 전체 다 풀어줄 수 있음

=> 이벤트를 분리된 파일, 다른 Entity에 연결하여 처리할 수 있음

useTabs

section { tab : ~~ , content : ~~ } 선언해두고

{content.map(section => (<button>{section.tab}</button>)}

으로 여러개 버튼 한번에 생성 가능

const useTabs = (initialTab, allTabs) => {
	const [currentIndex, setCurrentIndex] = useState(initialTab)
    return {
    	currentItem: allTabs[currentIndex]
        changeItem: setCurrentIndex
    }
};

useEffect

useTitle

문서 제목 업데이트
로딩 이런거 시켜줄 수 있다

useClick

reference : 우리의 component의 어떤 부분을 선택할 수 있는 방법
getElementById 같은거
reference 설정해준 뒤 useEffect로 이벤트 부여
component unmount시 eventListener 지워져야 함, return 으로 지워줌
=> 컴포넌트 마운트되지 않았을 때 이벤트리스너 배치되게 하고 싶지 않기 때문

useConfirm & usePreventLeave

=> hookless
useConfirm : 사용자가 무엇을 하기 전에 확인하는 것, 이벤트 실행 전에 보여주는 것. 확인하면 그 뒤에 실행
usePreventLeave : 창 끄려고 하면 저장 안했다고 알람 뜨는 그거, 리프레시하거나

useBeforeLeave

탭 닫을 때 실행, 마우스가 탭 벗어날 때 실행

useFadeIn & useNetwork

useFadeIn : 자동으로 서서히 나타나게 만듦
useRef(), useEffect() 써서

useNetwork : navigator가 offline 또는 online되는 것 막아주기

useScroll & useFullscreen

useScroll : 스크롤해서 지나갔을 때 변화주기
useFullscreen : 풀스크린으로 만들기

useNotification

알람 실행
notification API 사용 => notification mdn 보기
default 인 경우 모든 알림 허용되지 않음 (사용자 선택을 알 수 없어서 denied처럼 행동)

useAxios

axios add dependency 해줘야 => npm 설치 하는 것과 비슷
httpRequest 만드는 것
customization, configuration 허용
: defaul URL이나 자동 헤더 설정 등등 허용

+) date로 늘 새로운 숫자 생성 가능

마무리

useContext, useReducer, Callback, Memo 공부 더 해서 Hook 자세히 더 알 수 있도록 하기