[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]);

이 훅들은 리액트의 함수형 컴포넌트에서 상태 관리와 생명 주기 메서드를 사용하는 데 매우 유용합니다.