React의 Hook

React의 Hook은 함수형 컴포넌트에서 상태 관리와 라이프사이클 기능을 사용할 수 있도록 해주는 기능입니다. 클래스 컴포넌트를 작성할 필요 없이 간단하고 직관적으로 상태를 제어하고 부가적인 효과를 적용할 수 있도록 도와주며, 리액트 버전 16.8부터 도입되었습니다. Hooks는 기존 컴포넌트를 더 간결하게 만들며, 코드의 재사용성을 높여 주는 기능입니다.

 

1. useState

 

useState는 컴포넌트 내에서 상태를 선언하고 관리할 수 있는 Hook입니다. 호출 시 상태 변수와 상태를 업데이트하는 함수 쌍을 반환합니다.

 

사용 예제:

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

 

위 예제에서 count는 초기값 0을 갖는 상태 변수이며, setCount는 이를 업데이트하는 함수입니다. 버튼 클릭 시 setCount가 호출되면서 count의 값이 증가합니다.

 

2. useEffect

 

useEffect는 **부수 효과(side effects)**를 처리하는 Hook입니다. 데이터 가져오기, 구독(subscription) 설정, DOM 조작 등 다양한 작업에 사용되며, 렌더링 후 코드가 실행됩니다. useEffect는 첫 번째 매개변수로 실행할 함수를 받고, 두 번째 매개변수로 의존성 배열을 받습니다. 이 의존성 배열을 통해 특정 값이 변경될 때만 효과를 재실행할 수 있습니다.

 

사용 예제:

import React, { useState, useEffect } from 'react';

function Timer() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setCount((prevCount) => prevCount + 1);
        }, 1000);

        // Clean up on unmount
        return () => clearInterval(interval);
    }, []);

    return <p>Timer: {count}</p>;
}

 

위 예제에서 useEffect는 타이머가 매 초마다 count를 1씩 증가시키도록 설정합니다. 리턴문에서 clearInterval을 사용해 컴포넌트가 언마운트될 때 타이머를 정리합니다.

 

3. useContext

 

useContext는 Context API와 함께 사용되어 컴포넌트 계층 구조 전체에 걸쳐 데이터를 전달합니다. 이를 통해 props를 컴포넌트 체인으로 전달할 필요 없이 데이터를 공유할 수 있습니다.

 

사용 예제:

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

function DisplayTheme() {
    const theme = useContext(ThemeContext);

    return <p>Current theme: {theme}</p>;
}

 

4. useReducer

 

useReducer는 복잡한 상태 관리를 위해 useState의 대안으로 사용되는 Hook입니다. Redux와 유사한 방식으로 동작하여, 상태와 액션을 기반으로 한 업데이트 로직을 정의할 수 있습니다. 주로 여러 상태의 조합이나 상태 업데이트 로직이 복잡할 때 유용합니다.

 

사용 예제:

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:
            throw new Error();
    }
}

function Counter() {
    const [state, dispatch] = useReducer(reducer, { count: 0 });

    return (
        <div>
            <p>Count: {state.count}</p>
            <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
            <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
        </div>
    );
}

 

위 예제에서 useReducer는 reducer 함수를 사용해 count 상태를 증가 및 감소시키는 작업을 수행합니다.

 

5. useRef

 

useRef는 DOM 요소나 변경이 필요 없는 값을 참조할 수 있도록 하는 Hook입니다. React는 useRef를 통해 DOM 요소를 접근하거나, 렌더링과 상관없이 값이 지속되는 변수를 유지할 수 있습니다.

 

사용 예제:

import React, { useRef } from 'react';

function FocusInput() {
    const inputRef = useRef(null);

    const handleClick = () => {
        inputRef.current.focus();
    };

    return (
        <div>
            <input ref={inputRef} type="text" />
            <button onClick={handleClick}>Focus Input</button>
        </div>
    );
}

 

위 예제에서 useRef는 inputRef로 참조를 만들어 특정 DOM 요소에 접근할 수 있게 합니다. 버튼 클릭 시 해당 입력 필드에 포커스가 이동합니다.

 

6. useMemo와 useCallback

 

• useMemo: 값을 메모이제이션하여 특정 값이 변경되지 않는 한 계산을 반복하지 않도록 합니다. 주로 계산이 복잡한 값의 재계산을 방지할 때 사용됩니다.

• useCallback: 함수를 메모이제이션하여 특정 값이 변경되지 않는 한 동일한 함수 참조를 유지합니다. 주로 컴포넌트가 자주 렌더링되어도 불필요하게 동일한 함수를 재생성하지 않도록 할 때 사용됩니다.

 

사용 예제:

import React, { useState, useMemo, useCallback } from 'react';

function ExpensiveComponent({ compute, count }) {
    return <p>Result: {compute(count)}</p>;
}

function App() {
    const [count, setCount] = useState(0);

    const computeExpensiveValue = useCallback((count) => {
        // 시간이 오래 걸리는 계산
        return count * 2;
    }, []);

    return (
        <div>
            <ExpensiveComponent compute={computeExpensiveValue} count={count} />
            <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
    );
}

 

위 예제에서 useCallback으로 computeExpensiveValue 함수를 메모이제이션하여 불필요한 재생성을 방지합니다.

 

요약

 

React의 Hook은 함수형 컴포넌트에서 상태 관리, 효과 처리, 컨텍스트 접근, 복잡한 상태 관리 등을 쉽게 다룰 수 있게 해 주는 유용한 기능입니다. 이를 통해 코드의 가독성과 재사용성을 높이며, 상태와 라이프사이클을 유연하게 다룰 수 있습니다.