React 16.8에 새로 추가된 기능으로, JavaScript 함수를 사용해
class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있도록 해줍니다.
최상위(at the top level)에서만 Hook을 호출해야 합니다.
반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하지 않는다.
React 함수 컴포넌트 내에서만 Hook을 호출해야 합니다.
일반 JavaScript 함수에서는 Hook을 호출해서는 않된다.
이 두 가지 규칙을 강제하는 eslint-plugin-react-hooks 라는
ESLint 플러그인을 사용하면 Hook을 편리하게 사용 할 수 있습니다. ( CRA에 포함 )
useState : 함수형 컴포넌트에서 상태를 사용할 수 있게 해줍니다.
useState 예시코드
import React, { useState } from 'react'; function Example() { const [count, setCount] = useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
useEffect : 함수형 컴포넌트에서 생명주기를 다룰 수 있게 해줍니다.
useEffect 예시코드
import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); useEffect(() => { document.title = `You clicked ${count} times`; }); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
useContext : 함수형 컴포넌트에서 Context를 사용할 수 있게 해줍니다.
useContext 예시코드
import React, { useContext } from 'react'; import { MyContext } from './MyContext'; function Example() { const { count, setCount } = useContext(MyContext); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div> ); }
useRef : 함수형 컴포넌트에서 Ref를 사용할 수 있게 해줍니다.
useRef 예시코드
import React, { useRef } from 'react'; function Example() { const inputEl = useRef(null); const onButtonClick = () => { inputEl.current.focus(); }; return ( <div> <input ref={inputEl} type="text" /> <button onClick={onButtonClick}>Focus the input</button> </div> ); }
useMemo : 복잡한 계산을 하는 함수의 결과 값을 캐싱하여 불필요한 리렌더링을 방지하는 Hook입니다.
useMemo 예시코드
import React, { useState, useMemo } from 'react'; function App() { const [a, setA] = useState(0); const [b, setB] = useState(0); // useMemo를 사용하여 계산 결과 캐싱 const result = useMemo(() => { // 의존성 배열에 있는 값이 변경될 때만 캐싱된 결과 값을 다시 계산 console.log('Calculating...'); return a + b; }, [a, b]); return ( <div> <p>Result: {result}</p> <button onClick={() => setA(a + 1)}>Increment A</button> <button onClick={() => setB(b + 1)}>Increment B</button> </div> ); } export default App;
useCallback : 함수형 컴포넌트에서 콜백 함수를 메모이제이션할 수 있게 해줍니다.
useCallback을 사용하면 함수가 새로 생성되는 것을 방지하고, 불필요한 렌더링을 방지할 수 있습니다.
useCallback 예시코드
import React, { useState, useCallback } from 'react'; function App() { const [count, setCount] = useState(0); // useCallback을 사용하여 함수 캐싱 const handleClick = useCallback(() => { // count가 업데이트 될 때마다 새로운 함수를 생성하는 대신에 이전에 생성한 함수를 재사용 setCount(count + 1); }, [count]); return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Click me!</button> </div> ); } export default App;
useReducer : useState 대신 복잡한 상태 로직을 처리하기 위해 사용할 수 있는 Hook입니다.
useReducer를 사용하면 상태 업데이트 로직을 분리할 수 있으며, 다수의 하위 컴포넌트에 전달하기 쉬운 값을 반환할 수 있습니다.
useReducer 예시코드
import React, { useReducer } from 'react'; const initialState = { count: 0 }; function reducer(state, action) { switch (action.type) { case 'increment': return { count: state.count + 1 }; case 'decrement': return { count: state.count - 1 }; default: throw new Error(); } } function Counter() { //state와 dispatch를 반환받아 사용할 수 있습니다. const [state, dispatch] = useReducer(reducer, initialState); return ( <div> <p>Count: {state.count}</p> <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </div> ); } export default Counter;
react 관련 Hook은 나열한 7개 이외에도 더 있지만 크게 사용하는 hook들을 중점적으로 정리해 보았다.
출처 및 참조 : Chat Gpt 3.5 , React 공식문서