[React] 리액트(React)에서 훅(Hook)
반응형
리액트(React)에서 훅(Hook)은 함수형 컴포넌트 내에서 상태(state)와 생명 주기(lifecycle) 기능을 사용할 수 있게 하는 기능입니다. 훅은 다음과 같은 주요 기능들을 제공합니다:
1. useState
상태 관리를 위해 사용됩니다. 함수형 컴포넌트에서 상태를 추가하고 사용할 수 있게 합니다.
javascript
const [state, setState] = useState(initialState);
2. useEffect
생명 주기 메서드를 대체하는 훅으로, 컴포넌트가 렌더링될 때와 업데이트될 때 특정 작업을 수행할 수 있게 합니다.
javascript
useEffect(() => {
// 작업 수행
return () => {
// 정리 작업 수행
};
}, [dependencies]); // 종속성 배열
3. useContext
컨텍스트를 사용하여 컴포넌트 트리 전체에서 값을 공유할 수 있게 합니다.
javascript
const value = useContext(MyContext);
4. useReducer
useState 대신 복잡한 상태 로직을 처리할 때 사용됩니다.
javascript
const [state, dispatch] = useReducer(reducer, initialState);
5. useMemo
성능 최적화를 위해 사용되며, 특정 값이 변경될 때만 메모이제이션된 값을 다시 계산합니다.
javascript
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
6. useCallback
성능 최적화를 위해 사용되며, 특정 값이 변경될 때만 콜백 함수를 다시 생성합니다.
javascript
const memoizedCallback = useCallback(() => {
doSomething(a, b);
}, [a, b]);
7. useRef
참조를 사용하여 DOM 요소나 변수 등을 접근하고 관리할 수 있게 합니다.
javascript
const myRef = useRef(initialValue);
8. useLayoutEffect
useEffect와 유사하지만, 모든 DOM 변형 후 동기적으로 작동합니다. 레이아웃을 변경하는 작업에 적합합니다.
javascript
useLayoutEffect(() => {
// 작업 수행
}, [dependencies]);
이 훅들은 리액트의 함수형 컴포넌트에서 상태 관리와 생명 주기 메서드를 사용하는 데 매우 유용합니다.
반응형
'낙서장[1] > 1. React' 카테고리의 다른 글
| [React] 리액트 JSX (0) | 2025.02.06 |
|---|---|
| [React] Axios Interceptor (0) | 2025.02.05 |
| [React] 싱글플레이어 애플리케이션 단점 세션초기화 (1) | 2025.02.05 |
| [React] Promise 객체 비동기 작업의 세 가지 상태 (0) | 2025.02.05 |
| [React] 리덕스(Redux)는 JavaScript 애플리케이션의 상태(state) 관리를 위한 예측 가능한 상태 컨테이너 (0) | 2025.02.05 |