목차와 함께 읽으려면 https://devaradise.com/react-custom-hooks-best-practices/ 원본 게시물을 확인하세요
React 개발자라면 구성 요소 간에 로직을 공유해야 하는 상황에 직면했을 것입니다. 이 게시물에서는 사용자 정의 후크가 무엇인지, 언제 사용하는지, 작성 모범 사례, 그리고 React 애플리케이션을 더 깔끔하고 유지 관리하기 쉽게 만드는 몇 가지 일반적인 사용 사례를 살펴보겠습니다.
React 관련 포스팅
커스텀 후크는 React 구성 요소 전체에서 공유할 수 있는 상태 저장 논리를 갖춘 재사용 가능한 함수입니다. 접두사 사용으로 시작하고 내부의 다른 후크를 호출할 수 있으므로 복잡한 상태 및 효과 논리를 간단하고 재사용 가능한 함수로 추상화할 수 있습니다.
React 커스텀 후크는 코드를 복제하지 않고 애플리케이션의 여러 부분 간에 로직을 공유해야 하는 상황에 적합합니다. 이렇게 하면 구성 요소를 더욱 깔끔하게 유지할 수 있을 뿐만 아니라 더욱 모듈화된 코드베이스를 촉진할 수 있습니다.
사용자 정의 후크는 일반 자바스크립트 재사용 가능 함수와 다릅니다. 사용자 정의 후크는 상태 저장입니다. 즉, useState 후크 또는 기타 내장 후크와 함께 반응 상태를 사용해야 합니다.
사용자 정의 후크는 구성 요소 전체에서 상태 저장 논리를 재사용해야 할 때마다, 특히 데이터 가져오기, 양식 처리, 인증과 같은 복잡한 작업에 매우 적합합니다. 구성 요소 코드를 단순화하고 가독성을 높이며 테스트 및 유지 관리를 더 쉽게 만듭니다.
커스텀 후크의 또 다른 주요 사용 사례는 여러 위치에서 동일한 코드를 작성하는 경우입니다. 동일한 로직을 복사하여 붙여넣는 대신 사용자 정의 후크로 추출하여 필요할 때마다 재사용할 수 있습니다. 이는 DRY(Don't Repeat Yourself) 원칙을 장려하여 코드베이스를 더욱 효율적으로 만들고 오류 가능성을 줄입니다.
맞춤형 후크를 만들 때 효과적이고 유지 관리가 용이하도록 염두에 두어야 할 몇 가지 모범 사례가 있습니다. 다음은 몇 가지 주요 지침입니다.
항상 사용자 정의 후크의 이름은 use로 시작하세요. 이는 다른 React 개발자가 이러한 기능을 후크로 식별하여 후크 규칙이 올바르게 적용되도록 하는 데 도움이 되는 규칙입니다.
후크가 순수 기능인지 확인하세요. 후크 내부에서 직접 부작용을 피하세요. 대신 useEffect 또는 유사한 후크를 사용하여 관리하세요.
부작용은 렌더링 후 구성 요소에서 발생하는 모든 작업 또는 동작이며 현재 구성 요소 렌더링 주기에 직접적인 영향을 주지 않습니다.
useMemo 또는 useCallback과 같은 메모 기술을 사용하면 특히 비용이 많이 드는 계산이나 복잡한 상태 업데이트를 처리할 때 후크로 인해 불필요한 재렌더링이 발생하는 것을 방지할 수 있습니다.
useState, useEffect, useReducer 및 useCallback과 같은 내장 후크를 활용하여 사용자 정의 후크 내에서 상태 및 부작용을 관리하세요.
상태, 함수 또는 노출하려는 값이 포함된 후크에서 일관된 값 유형을 가진 배열 또는 객체를 반환합니다. 이렇게 하면 후크가 무엇을 제공하고 어떻게 사용하는지 명확해집니다.
맞춤형 후크가 제대로 테스트되었는지 확인하세요. React Testing Library 및 Jest와 같은 도구를 사용하여 후크 동작을 검증하는 테스트를 작성하세요.
맞춤 후크에 대한 명확한 문서를 제공하세요. 다른 사람(그리고 자신)이 더 쉽게 사용하고 유지 관리할 수 있도록 해당 기능, 매개 변수 및 반환 값을 설명하세요.
훅을 너무 복잡하게 만들지 마세요. 후크가 너무 복잡해지기 시작하면 더 작고 집중적인 후크로 나누는 것이 좋습니다.
후크에 단일 책임만 있는지 확인하세요.
후크 내에서 오류를 적절하게 처리합니다. 이렇게 하면 이러한 후크를 사용하는 구성 요소가 중단 없이 예상치 못한 시나리오를 처리할 수 있습니다.
다음은 React 프로젝트에서 접할 수 있는 사용자 정의 후크의 몇 가지 일반적인 사용 사례입니다.
API 엔드포인트에서 데이터를 가져오기 위한 사용자 정의 후크는 데이터를 가져오고 표시해야 하는 다양한 구성 요소에서 재사용할 수 있습니다.
import { useState, useEffect } from 'react';
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
async function fetchData() {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error('Network response was not ok');
}
const result = await response.json();
setData(result);
} catch (err) {
setError(err);
} finally {
setLoading(false);
}
}
fetchData();
}, [url]);
return { data, loading, error };
}
const Component = () => {
const { data, loading, error } = useFetch('https://example.com/api/path');
if (loading) return <div>Loading...</div>;
if (error) return <div>Error: {error.message}</div>;
return (
<div>
<h1>Data:</h1>
<pre class="brush:php;toolbar:false">{JSON.stringify(data)}
사용자 정의 후크를 사용하면 양식 상태를 관리하고, 유효성 검사를 처리하고, 제출 핸들러를 제공할 수 있어 양식 관리가 간편해집니다.
import { useState } from 'react';
function useForm(initialValues) {
const [values, setValues] = useState(initialValues);
const [errors, setErrors] = useState({});
const handleChange = (event) => {
const { name, value } = event.target;
setValues({
...values,
[name]: value
});
};
const validate = (name, value) => {
if (value.trim() === '') {
setErrors((prevErrors) => ({ ...prevErrors, [name]: 'This field is required' }));
} else {
setErrors((prevErrors) => ({ ...prevErrors, [name]: '' }));
}
};
const handleSubmit = (event, callback) => {
event.preventDefault();
if (Object.values(errors).every((err) => err === '')) {
callback(values);
}
};
return { values, handleChange, handleSubmit, validate, errors };
}
const Component = () => {
const { values, errors, handleChange, handleSubmit } = useForm({ username: '', password: '' }, validate);
const submit = () => {
alert('Form submitted successfully');
};
return (
<form onSubmit={(e) => handleSubmit(e, submit)}>
<div>
<label>Username</label>
<input type='text' name='username' value={values.username} onChange={handleChange} />
{errors.username && <p>{errors.username}</p>}
</div>
<button type='submit'>Submit</button>
</form>
);
};
로그인, 로그아웃, 사용자 인증 여부 확인 등 사용자 인증 상태를 관리합니다.
import { useState, useEffect } from 'react';
function useAuth() {
const [user, setUser] = useState(null);
useEffect(() => {
const loggedUser = localStorage.getItem('user');
if (loggedUser) {
setUser(JSON.parse(loggedUser));
}
}, []);
const login = (userData) => {
setUser(userData);
// call login api here
localStorage.setItem('user', JSON.stringify(userData));
};
const logout = () => {
setUser(null);
localStorage.removeItem('user');
};
return { user, login, logout };
}
창 크기 변경을 추적하기 위한 맞춤 후크로, 반응형 디자인에 유용할 수 있습니다.
import { useState, useEffect } from 'react';
function useWindowSize() {
const [size, setSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
useEffect(() => {
const handleResize = () => {
setSize({
width: window.innerWidth,
height: window.innerHeight
});
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
}, []);
return size;
}
입력 변경 사항을 디바운싱하기 위한 사용자 정의 후크로, 검색 입력이나 함수 호출을 지연하려는 기타 시나리오에 유용합니다.
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => {
setDebouncedValue(value);
}, delay);
return () => {
clearTimeout(handler);
};
}, [value, delay]);
return debouncedValue;
}
사용자 정의 후크를 사용하면 React 코드를 재사용 및 유지 관리하기 쉽게 만들어 크게 단순화할 수 있습니다. 후크 내부에서 직접 부작용을 방지하고 배열이나 객체를 직접 변경하지 않는 등의 모범 사례를 준수하면 예측 가능하고 테스트하기 쉬운 후크를 만들 수 있습니다.
이 게시물이 유용했다면 좋아요를 누르고 공유해 보세요. 커스텀 후크에 대한 의견이나 더 많은 제안 사항이 있으면 주저하지 말고 댓글에 게시해 주세요.
감사합니다. 즐거운 코딩하세요!
위 내용은 React Custom Hooks 모범 사례: 사용 사례 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
