리액트에서 자주 사용되는 주요 훅들은 useState, useEffect, useContext, useReducer, useRef가 있습니다. 각각의 훅과 사용 예시를 함께 정리해 보겠습니다.
1. useState
컴포넌트에서 상태를 관리하는 가장 기본적인 훅입니다.
- 사용법: [상태, 상태변경함수] = useState(초기값)
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // count 상태 변수와 상태 변경 함수 setCount 설정
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase</button>
</div>
);
}이 훅은 간단한 숫자, 문자열, 배열 등 다 ㅈ양한 데이터 유형을 상태로 관리할 수 있습니다.
2. useEffect
컴포넌트의 생명주기 동안 특정 작업을 수행할 수 있는 훅입니다. componentDidMount, componentDidUpdate, componentWillUnmount의 역할을 대체합니다.
- 사용법: useEffect(콜백 함수, [의존성 배열])
import React, { useState, useEffect } from 'react';
function Timer() {
const [time, setTime] = useState(0);
useEffect(() => {
const interval = setInterval(() => {
setTime(prevTime => prevTime + 1);
}, 1000);
return () => clearInterval(interval); // 컴포넌트가 언마운트될 때 타이머 정리
}, []); // 빈 배열은 마운트 시 한 번만 실행
return <div>Timer: {time} seconds</div>;
}useEffect는 데이터 가져오기, 타이머 설정, 이벤트 리스너 등록 및 해제 같은 작업에 유용합니다.
3. useContext
컴포넌트 트리에서 데이터를 전역으로 관리하고 공유할 때 사용하는 훅입니다. Context API와 함께 사용하며, props를 여러 단계에 걸쳐 전달하지 않고도 데이터를 자식 컴포넌트에 전달할 수 있습니다.
- 사용법: const contextValue = useContext(Context)
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light'); // 초기값 설정
function ThemedButton() {
const theme = useContext(ThemeContext); // ThemeContext 값을 가져옴
return <button className={theme}>Themed Button</button>;
}
function App() {
return (
<ThemeContext.Provider value="dark">
<ThemedButton />
</ThemeContext.Provider>
);
}useContext는 전역적으로 관리되는 데이터를 쉽게 사용하게 해 주어 테마나 사용자 정보 관리에 유용합니다.
4. useReducer
useState보다 복잡한 상태 로직이 필요할 때 사용하는 훅입니다. 주로 상태와 액션을 분리하여 Redux와 유사한 패턴으로 상태를 관리할 수 있습니다.
- 사용법: [상태, dispatch] = useReducer(리듀서 함수, 초기 상태)
import React, { useReducer } from 'react';
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
default:
return state;
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, { count: 0 });
return (
<div>
<p>Count: {state.count}</p>
<button onClick={() => dispatch({ type: 'increment' })}>+</button>
<button onClick={() => dispatch({ type: 'decrement' })}>-</button>
</div>
);
}useReducer는 복잡한 상태와 여러 상태 변경 작업을 관리할 때 유용합니다.
5. useRef
특정 DOM 요소에 접근하거나 컴포넌트가 리렌더링될 때 유지해야 하는 값에 접근할 수 있습니다. useRef로 생성된 객체는 컴포넌트가 리렌더링되어도 값이 유지됩니다.
- 사용법: const refContainer = useRef(초기값)
import React, { useRef } from 'react';
function FocusInput() {
const inputRef = useRef(null);
const focusInput = () => {
if (inputRef.current) {
inputRef.current.focus();
}
};
return (
<div>
<input ref={inputRef} type="text" />
<button onClick={focusInput}>Focus the input</button>
</div>
);
}useRef는 DOM 조작이 필요한 경우나 이전 상태를 유지하고 싶은 경우에 유용합니다.
이 외에도 리액트에서는 useMemo와 useCallback 훅도 자주 사용됩니다.
이 훅들은 성능 최적화를 위해 특정 값이나 함수를 메모이제이션할 때 사용합니다.
'React.js' 카테고리의 다른 글
| [React.js]npm과 yarn 의 차이점 yarn을 쓰는 이유 (0) | 2024.09.09 |
|---|---|
| [ React.js]useform 사용 방법 (0) | 2024.08.10 |
| [실무 React.Js] Tabulater로 Grid 활용하기 (0) | 2024.07.23 |
| [실무 React.Js] React-query 데이터 저장하기 (0) | 2024.07.22 |
| [실무 React.Js] React-query 데이터 검색/조회하기 (2) | 2024.07.20 |