본 글은 Nilanth의 '리액트 컴포넌트를 가볍게 하기위한 15가지 커스텀 훅스'를 번역한 내용입니다.
출처 ▼
리액트 훅스는 리액트 커뮤니티에서 트렌딩되고있는 단어입니다. 리액트 훅스에 대해서 리액트 디벨로퍼라면 알았으면 좋겠습니다. 간단히 말해, 훅스는 (함수형 컴포넌트에서) 라이프 사이트 메소드를 쓰는데 있어서 많은 장점을 주고 또한 우리에게 functional한 컴포넌트들을 쓸수 있도록 합니다.
커스텀 훅스의 세계로 빠져봅시다! 커스텀 훅스는 컴포넌트 로직을 재사용 가능한 함수로 추출해서 쓸 수 있도록 하는데, 컴포넌트의 분할과 신용성을 높입니다. 우리가 여기서 살펴볼 것은 우리의 컴포넌트를 가볍게 만들어줄 15가지의 리액트 사용 패키지 커스텀 훅스입니다.
1. useIdle
useIdle 훅은 사용자가 도착한 페이지가 적당한지를 파악합니다. 두 개의 파라미터를 넘져줄 수 있습니다. -ms는 적당하다고 생각되는 시간과 initialState는 사용자의 첫 idle 시작점을 알려줍니다.
2. useInterval
이 훅은 우리에게 인터벌에 관련된 기능들을 쓸 수 있도록 해줍니다. 컴포넌트의 clearInterval가 자동으로 언마운트되도록 시키면서 또한 딜레이 값을 null로 두는 것으로 인터벌 동작을 막는 것을 돕기도 합니다.
3. useScroll
이 훅은 스크롤시 요소와 리렌더링의 스크롤 이벤트를 감지합니다. 자바스크립의 이벤트 리스너를 수동으로 추가할 필요가 없습니다.
4. useToggle
이 훅은 True와 False와 같은 두 개의 상태들 사이를 토글하기 위하여 만들어졌습니다. 이러한 접근은 수동적 로직을 줄이게 해줍니다.
5. useTitle
훅은 페이지의 타이틀을 만드는 데 쓰입니다.
6. usePrevious
이 훅은 이전 상태를 가져오는 데 쓰입니다. 전 상태를 가져오는 데 커스텀 로직을 쓰지 않아도 됩니다.
7. useSetState
이 훅은 현재의 상태에 오브젝트를 병합할 때 쓰입니다. 클래스 컴포넌트의 this.setState와 비슷합니다. 만약 여러개의 상태를 쓰고 있다면, setSetState로 하나의 오브젝트 상태로 만들어 줄 수 있습니다.
8. useCookie
이 훅은 쿠키의 현재 값을 쿠키를 업데이트 해주는 콜백, 쿠키를 지우는 콜백을 반환해주는 데 쓰입니다.
9. usePermission
이 훅은 브라우저 API의 허용 상태를 가져옵니다. API의 이름을 넘기면 허용 상태를 가져올 수 있습니다.
10. useDebounce
이 훅은 대기 시간이 완성될 때까지 이벤트를 지연시키는 데 쓰입니다. 아래 코드는 대기 시간이 완성된 이후에 setState를 실행시킵니다.
11. useGeolocation
이 훅은 유저의 geolocation을 가져오는 데 쓰입니다. useGeolocation은 고도, 위도, 경도와 그 밖에 많은 정보를 가져옵니다.
12. useNetworkState
이 훅은 브라우저의 네트워크 상태를 가져옵니다. useNetworkState는 유저와의 연결 상태들을 보여줄 수 있습니다.
13. useCopyToClipboard
useCopyToClipboard 훅은 텍스트를 클립보드로 복사하는 데 쓰입니다.
14. useFavicon
useFavicon 훅은 페이지의 파비콘을 적용시키는 데 쓰입니다.
15. useError
useError 훅은 에러를 디스패치 시키는 데 쓰입니다.
react-use 패키지에는 이보다 더 많은 커스텀 훅들이 있습니다. 도움이 되었기를 바랍니다. 읽어주셔서 감사합니다.
'React & React Native' 카테고리의 다른 글
| 8가지 React 프론트엔드 디벨로퍼 인터뷰를 위한 QnA (0) | 2022.06.14 |
|---|---|
| REST api를 이용한 리액트 로그인 구현 (1) | 2022.01.20 |
| JavaScript 문자열 반으로 나누기 && 특정 문자 포함시 들여쓰기 (\n) (0) | 2021.08.09 |
| 생활코딩 - Redux (0) | 2021.08.04 |
| 웹 게임을 만들며 배우는 React 틱택토 & 지뢰찾기 (0) | 2021.08.01 |
