[번역] 7 가지 멋진 React Hooks
생산성을 높이기 위해 매일 사용할 수있는 React Hooks
원본 URL :
https://medium.com/better-programming/7-awesome-react-hooks-38b81f3cbd0a
7 가지 멋진 리 액트 훅
7 월 8 일 ·
사진 제임스 Qualtrough 에 Unsplash .
React Hooks 가 출시되기 전에 프레임 워크의 기능적 구성 요소는 사용이 약간 제한되었습니다. 상태, 컨텍스트 API 및 일부 라이프 사이클 메소드 작업에 관해서는 우리가 할 수있는 것이 없었습니다.
하지만 React 16.8부터는 기존 코드를 재사용 할 수있는 유연성이 훨씬 더 많습니다.
오늘은 일상적인 문제를 해결하기 위해 다양한 React 훅을 사용하는 방법을 배웁니다. 자,이 흥미로운 여정을 시작합시다.
useFiler 후크
Crooks 으로 알려진 Christopher Patty 의 매우 멋진 후크 컬렉션 useFiler 이 있습니다 .
저는 개인적으로 웹 브라우저 내에서 가상 파일 시스템을 만들 수 있기 때문에 후크를 좋아합니다.
기본적으로 브라우저의 로컬 저장소를 사용하여 파일과 콘텐츠를 관리합니다.
시작하려면 애플리케이션에 crooks 패키지를 설치하세요.
npm install crooks --save
이제 crooks에게서 useFiler hook 를 가져옵니다.
import { useFiler } from 'crooks'
이제 후크를 초기화하고 가상 파일 시스템을 관리 할 준비가되었습니다. 다음은 간단한 예제 코드 스 니펫입니다.
위의 코드에서 볼 수 있듯이, 우리는 지금에 액세스 할 수 있습니다
const App = () => {
const [files, {add, remove, update, clear}] = useFiler("localStorageItem")
return (
<div>My Project</div>
)
}
사용 방법을 살펴 보겠습니다.
파일 추가
이 add() 함수는 하나의 필수 매개 변수를 허용합니다. 여기에서 JSON 직렬화 가능한 데이터를 전달해야합니다.
add("Save this JSON-serializable data in the file.")
참고 :이 함수는 모든 새 파일에 대한 ID를 자동으로 생성하지만 정수 또는 문자열을 두 번째 매개 변수로 전달하여 사용자 지정 ID를 설정할 수 있습니다.
파일 업데이트
이 update() 메서드는 두 개의 인수를받습니다. 첫 번째는 파일의 ID이고 두 번째 인수는 새 데이터를 전달하는 데 사용됩니다.
update("abc1234", "New content of file.")
파일을 지우다
remove() 삭제하려면 함수 에서 파일의 ID를 전달하십시오
remove("abc1234")
모든 파일 지우기
모든 파일을 제거 하려면 clear() 함수를 호출하십시오
clear()
useFetch 후크
Steven Persia (MERN Stack 개발자)는 Captain hook 이라는 훌륭한 React 후크 목록을 작성했습니다 . 일상적인 작업에 매우 유용합니다.
다음 몇 가지 후크 예는 그의 컬렉션에서 볼 수 있습니다.
useFetch API에서 데이터를 가져 오는 데 사용할 수 있습니다. 요청이 완료되면 응답과 오류 (있는 경우)를 반환합니다.
프로젝트에서 가져옵니다.
import useFetch from "hooks/useFetch";
요청을하다:
const { response, errors } = useFetch("https://api.github.com/users/torvalds/repos");
useHover Hook
useHover
후크 선장 후크 컬렉션에 속한다.
기본적으로 화면에서 마우스 커서를 추적하여 특정 요소에 배치되었는지 여부를 감지합니다. 그렇다면 hovered 이벤트를 트리거합니다.
후크 가져 오기 :
import useHover from "hooks/useHover";
useHover 후크 초기화 :
const [hoverMe, isHovered] = useHover ();
여기서는 hoverMe 특정 HTML 요소를 나타내지만 isHovered 조건문에서 확인할 수있는 부울 값을 포함합니다.
예를 들어 다음과 같이 사용할 수 있습니다.
<div ref={hoverMe}>{isHovered ? "Hovered!" : "Hover me!"}</div>
useSlug Hook
슬러그는 모든 웹 프로젝트에서 중요한 부분입니다. 사실 웹 사이트의 SEO도 높일 수 있습니다.
이것이 Steven이 useSlug Captain Hook 컬렉션에 추가 한 이유 입니다.
이를 사용하여 모든 문자열을 SEO 친화적 인 슬러그로 빠르게 바꿀 수 있습니다.
분음 부호 (악센트)를 표준 대응 부호로 대체 할 수있을만큼 똑똑합니다.
예를 들어, é 또는 è 를 e 로 변환 합니다.
평소와 같이 먼저 후크를 가져와야합니다.
useSlug("React Hooks! résoudre les problèmes quotidiens");
// react-hooks-resoudre-les-problemes-quotidiens
용법
후크를 초기화하는 동안 모든 문자열 (예 : 기사 제목)을 첫 번째 매개 변수로 전달합니다. 결과적으로 프로젝트에서 즉시 사용할 수있는 잘 구성된 슬러그를 반환합니다.
useSlug ( "React Hooks! résoudre les problèmes quotidiens");
// react-hooks-resoudre-les-problemes-quotidiens
useDrag 및 useDrop Hooks
ahooks 라는 오픈 소스 React Hooks 라이브러리가 있습니다 . 전자 상거래 거인 Alibaba가 일부 자원 봉사자와 함께 적극적으로 개발하고 있습니다.
이 기사를 쓰는 시점에는 약 46 개의 후크가 있습니다. 그들 각각은 특정 문제를 해결하는 데 중점을 둡니다.
이 섹션에서는 한 쌍의 후크 (useDrag 및 useDrop).
지금 쯤이면 그들이 무엇을하는지 이미 알고있을 것입니다.
그래도 HTML5의 끌어서 놓기 기능에 도움이된다는 점을 언급해야합니다.
설치:
npm install ahooks --save
후크를 가져옵니다.
import {useDrag, useDrop} from 'ahooks';
용법
먼저 useDrag 및 useDrop 후크를 초기화하십시오.
useDrag DOM 요소에 전달 된 소품을 반환합니다.
useDrop 놓기 영역으로 전달 된 소품을 반환합니다.
또한 드래그 요소가 드롭 영역 위에 있는지 여부를 부울 속성 ( isHovering )을 사용하지 않는지 여부를 알려줍니다.
마지막으로 useDrop 삭제 된 항목 유형에 따라 실행되는 4 개의 콜백 함수가 있습니다.
onText
onFiles
onUri
onDom
const getDragProps = useDrag();
const [props, { isHovering }] = useDrop({
onText: (text, e) => {
alert(`'text: ${text}' dropped`);
},
onFiles: (files, e) => {
alert(`${files.length} file dropped`);
},
onUri: (uri, e) => {
alert(`uri: ${uri} dropped`);
},
onDom: (content: string, e) => {
alert(`custom: ${content} dropped`);
}
});
마우스를 사용하여 드래그 할 수있는 HTML5 요소 :
<div {...getDragProps(id)}>Draggable Element</div>
무언가를 놓을 수있는 HTML5 요소 :
<div {...props}>
{isHovering ? 'Release Item Here' : 'Drop Anything Here'}
</div>
useDarkMode 후크
Craig Walker는 원래 인기있는 맞춤형 React hook 컬렉션 인 React Recipes를 개발 했습니다.
useDarkMode
웹 사이트 테마의 밝은 모드와 어두운 모드 사이를 전환 할 수 있는 후크를 제공합니다
모드 전환 후 현재 값을 localStorage 입니다.
이는 사용자가 선호하는 모드가 당사 웹 사이트가 열리는 모든 브라우저 탭에 즉시 적용된다는 것을 의미합니다.
라이브러리 설치 :
npm install react-recipes --save
수입:
import { useDarkMode } from "react-recipes";
빠른 예
기본적으로 useDarkMode() 두 가지를 반환합니다.
darkMode: 다크 모드가 활성화되면 참인 부울 값입니다.
setDarkMode: 밝고 어두운 모드를 전환합니다.
function App() {
const [darkMode, setDarkMode] = useDarkMode();
return (
<div className="header">
<Toggle darkMode={darkMode} setDarkMode={setDarkMode} />
</div>
);
}
결론
오늘, 당신은 일상 생활에서 React Hooks의 사용을 배웠습니다. 몇 가지 예제 사용 사례를 보았지만 프로젝트에 포함 할 수있는 수많은 오픈 소스 후크가 있습니다.
이제 후크를 사용하여 React 프로젝트에서 다른 사람의 코드를 사용하는 것이 편하기를 바랍니다. 사실 React Hooks의 주요 이점은 더 나은 재사용 가능한 코드를 작성할 수 있다는 것입니다.
