React Hooks는 React에서 기능적 구성 요소를 작성하는 방식에 혁명을 일으켜 클래스를 작성하지 않고도 상태 및 기타 React 기능을 사용할 수 있게 해줍니다. 이 가이드에서는 복잡한 상태를 관리하고 성능을 최적화하기 위한 필수 후크, 사용자 정의 후크 및 고급 후크 패턴을 소개합니다.
React Hooks는 기능적 구성 요소의 React 상태 및 수명 주기 기능을 "연결"할 수 있는 기능입니다. Hooks는 React 16.8에서 도입되었으며 기능적 구성 요소에서 상태 및 기타 React 기능을 사용하는 보다 직접적인 방법을 제공합니다.
useState는 기능적 구성 요소에 상태를 추가할 수 있는 후크입니다.
예:
import React, { useState } from 'react';
const Counter = () => {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
};
export default Counter;
이 예에서 useState는 count 상태 변수를 0으로 초기화합니다. setCount 함수는 버튼을 클릭할 때 상태를 업데이트합니다.
useEffect는 데이터 가져오기, DOM과 직접 상호작용, 구독 설정과 같은 기능 구성요소에서 부작용을 수행할 수 있게 해주는 후크입니다. 이는 클래스 구성 요소(comComponentDidMount, componentDidUpdate 및 componentWillUnmount)의 여러 수명 주기 메서드 기능을 결합합니다.
예:
import React, { useState, useEffect } from 'react';
const DataFetcher = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => setData(data));
}, []);
return (
<div>
{data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)} : 'Loading...'}
이 예에서 useEffect는 구성 요소가 마운트될 때 API에서 데이터를 가져옵니다.
useContext는 특정 컨텍스트에 대한 컨텍스트 값에 액세스할 수 있게 해주는 후크입니다.
예:
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
const ThemedComponent = () => {
const theme = useContext(ThemeContext);
return <div>The current theme is {theme}</div>;
};
export default ThemedComponent;
이 예에서 useContext는 ThemeContext의 현재 값에 액세스합니다.
useReducer는 기능 구성 요소의 복잡한 상태 논리를 관리할 수 있는 후크입니다. useState의 대안입니다.
예:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
이 예에서 useReducer는 리듀서 함수를 사용하여 카운트 상태를 관리합니다.
사용자 정의 후크를 사용하면 여러 구성 요소에서 상태 저장 논리를 재사용할 수 있습니다. 커스텀훅은 내장된 후크를 활용하는 기능입니다.
예:
import { useState, useEffect } from 'react';
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then(response => response.json())
.then(data => setData(data));
}, [url]);
return data;
};
const DataFetcher = ({ url }) => {
const data = useFetch(url);
return (
<div>
{data ? <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)} : 'Loading...'}
이 예에서 useFetch는 지정된 URL에서 데이터를 가져오는 사용자 정의 후크입니다.
여러 하위 값이 포함된 복잡한 상태 로직을 처리하거나 다음 상태가 이전 상태에 종속되는 경우 useReducer가 useState보다 더 적합할 수 있습니다.
예:
import React, { useReducer } from 'react';
const initialState = { count: 0 };
const reducer = (state, action) => {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
};
const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
<button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
</div>
);
};
export default Counter;
이 예에서 useReducer는 리듀서 함수를 사용하여 카운트 상태를 관리합니다.
useMemo는 계산된 값을 메모하여 종속성 중 하나가 변경될 때만 다시 계산하는 후크입니다. 렌더링할 때마다 비용이 많이 드는 계산을 방지하여 성능을 최적화하는 데 도움이 됩니다.
예:
import React, { useState, useMemo } from 'react';
const ExpensiveCalculation = ({ number }) => {
const computeFactorial = (n) => {
console.log('Computing factorial...');
return n <= 1 ? 1 : n * computeFactorial(n - 1);
};
const factorial = useMemo(() => computeFactorial(number), [number]);
return <div>Factorial of {number} is {factorial}</div>;
};
const App = () => {
const [number, setNumber] = useState(5);
return (
<div>
<input
type="number"
value={number}
onChange={(e) => setNumber(parseInt(e.target.value, 10))}
/>
<ExpensiveCalculation number={number} />
</div>
);
};
export default App;
이 예에서 useMemo는 숫자가 변경될 때만 계승 계산이 다시 계산되도록 합니다.
useCallback은 함수를 기억하여 종속성 중 하나가 변경되지 않는 한 렌더링할 때마다 다시 생성되는 것을 방지하는 후크입니다. 참조 동등성에 의존하는 하위 구성 요소에 안정적인 기능을 전달하는 데 유용합니다.
예:
import React, { useState, useCallback } from 'react';
const Button = React.memo(({ onClick, children }) => {
console.log(`Rendering button - ${children}`);
return <button onClick={onClick}>{children}</button>;
});
const App = () => {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount((c) => c + 1), []);
return (
<div>
<Button onClick={increment}>Increment</Button>
<p>Count: {count}</p>
</div>
);
};
export default App;
이 예에서 useCallback은 종속성이 변경되는 경우에만 증가 함수가 다시 생성되도록 보장하여 Button 구성 요소가 불필요하게 다시 렌더링되는 것을 방지합니다.
React Hooks를 이해하고 활용하는 것은 현대 React 개발에 필수적입니다. 후크를 사용하면 기능적 구성 요소에서 더 깔끔하고 유지 관리하기 쉬운 코드를 작성할 수 있습니다. useState, useEffect, useContext 및 useReducer와 같은 필수 후크는 물론 사용자 정의 후크와 같은 고급 패턴, useMemo 및 useCallback을 사용한 성능 최적화를 마스터하면 강력하고 효율적인 React 애플리케이션을 구축할 수 있습니다. 주니어 개발자로서 이러한 개념에 익숙해지면 고품질 React 애플리케이션을 개발하고 유지 관리하는 능력이 크게 향상됩니다.
위 내용은 주니어 레벨: React의 라이프사이클 방법 및 후크의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
