Custom Hook은 React 애플리케이션의 여러 구성 요소에서 상태 저장 논리를 재사용할 수 있게 해주는 JavaScript 함수입니다. 사용자 정의 후크는 구성 요소 간에 공유할 수 있는 논리를 캡슐화하고 구성 요소를 깨끗하게 유지하며 코드 재사용성을 촉진하는 강력한 도구입니다.
사용자 정의 후크에는 React의 규칙을 따르기 위해 use라는 접두사가 붙으며, 내부에 다른 후크(예: useState, useEffect, useContext 등)를 사용할 수 있습니다.
맞춤형 후크는 다음과 같은 여러 가지 이점을 제공합니다.
맞춤형 후크를 만들려면 다음 단계를 따르세요.
다음은 마우스 위치를 관리하는 사용자 정의 후크의 간단한 예입니다.
import { useState, useEffect } from 'react'; // Custom Hook to track mouse position const useMousePosition = () => { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { const updatePosition = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; // Add event listener for mouse movement window.addEventListener('mousemove', updatePosition); // Clean up the event listener return () => { window.removeEventListener('mousemove', updatePosition); }; }, []); return position; }; export default useMousePosition;
이제 모든 구성요소에서 이 사용자 정의 후크를 사용하여 마우스 위치에 액세스할 수 있습니다.
import { useState, useEffect } from 'react'; // Custom Hook to track mouse position const useMousePosition = () => { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { const updatePosition = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; // Add event listener for mouse movement window.addEventListener('mousemove', updatePosition); // Clean up the event listener return () => { window.removeEventListener('mousemove', updatePosition); }; }, []); return position; }; export default useMousePosition;
양식 처리와 같은 더 복잡한 논리를 위해 사용자 정의 후크를 생성할 수 있습니다.
import React from 'react'; import useMousePosition from './useMousePosition'; const MouseTracker = () => { const position = useMousePosition(); // Using the custom hook return ( <div> <h2>Mouse Position:</h2> <p>X: {position.x}, Y: {position.y}</p> </div> ); }; export default MouseTracker;
이제 양식 구성 요소에서 useFormInput을 사용할 수 있습니다.
import { useState } from 'react'; // Custom Hook to handle form input const useFormInput = (initialValue) => { const [value, setValue] = useState(initialValue); const handleChange = (event) => { setValue(event.target.value); }; return { value, onChange: handleChange, }; }; export default useFormInput;
사용자 정의 후크는 React 후크와 동일한 규칙을 따릅니다.
사용자 정의 후크를 사용하여 데이터 가져오기와 같은 부작용을 처리할 수도 있습니다.
import React from 'react'; import useFormInput from './useFormInput'; const MyForm = () => { const nameInput = useFormInput(''); const emailInput = useFormInput(''); const handleSubmit = (event) => { event.preventDefault(); console.log('Name:', nameInput.value); console.log('Email:', emailInput.value); }; return ( <form onSubmit={handleSubmit}> <div> <label>Name:</label> <input type="text" {...nameInput} /> </div> <div> <label>Email:</label> <input type="email" {...emailInput} /> </div> <button type="submit">Submit</button> </form> ); }; export default MyForm;
구성 요소에서 useFetchData 후크를 사용하는 방법은 다음과 같습니다.
import { useState, useEffect } from 'react'; // Custom Hook to track mouse position const useMousePosition = () => { const [position, setPosition] = useState({ x: 0, y: 0 }); useEffect(() => { const updatePosition = (event) => { setPosition({ x: event.clientX, y: event.clientY }); }; // Add event listener for mouse movement window.addEventListener('mousemove', updatePosition); // Clean up the event listener return () => { window.removeEventListener('mousemove', updatePosition); }; }, []); return position; }; export default useMousePosition;
위 내용은 React의 사용자 정의 후크: 구성 요소 간 논리 재사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!