React Hooks

안녕하세요! 오늘은 React Hooks에 대해 알아보겠습니다. React Hooks는 함수형 컴포넌트에서 상태와 생명 주기 기능을 사용할 수 있게 해주는 기능입니다. Hooks를 사용하면 코드가 더 간결하고 직관적이게 됩니다.

React Hooks

1. useState

useState 훅은 함수형 컴포넌트에서 상태를 관리할 수 있게 해줍니다. 초기 상태 값을 인수로 받아 상태 값과 상태 값을 갱신할 수 있는 함수를 반환합니다.

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>
    );
}

2. useEffect

useEffect 훅은 함수형 컴포넌트에서 사이드 이펙트를 수행할 수 있게 해줍니다. 컴포넌트가 렌더링될 때마다 특정 코드를 실행할 수 있습니다.

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

function Timer() {
    const [seconds, setSeconds] = useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            setSeconds(prevSeconds => prevSeconds + 1);
        }, 1000);

        return () => clearInterval(interval);
    }, []);

    return (
        <div>
            <p>Seconds: {seconds}</p>
        </div>
    );
}

3. useContext

useContext 훅은 Context API와 함께 사용되어 컨텍스트 값을 쉽게 접근할 수 있게 해줍니다.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function ThemedButton() {
    const { theme, setTheme } = useContext(ThemeContext);

    return (
        <button
            style=
            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
        >
            Toggle Theme
        </button>
    );
}

4. useReducer

useReducer 훅은 상태 관리 로직을 컴포넌트 외부로 분리하고, 복잡한 상태 관리를 간단하게 할 수 있게 해줍니다. 이는 Redux와 비슷한 패턴을 제공합니다.

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() {
    const [state, dispatch] = useReducer(reducer, initialState);

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

5. useRef

useRef 훅은 컴포넌트에서 DOM 요소나 변수 값을 저장하고 접근할 수 있게 해줍니다. 리렌더링 없이 값이 유지됩니다.

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

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

    useEffect(() => {
        inputRef.current.focus();
    }, []);

    return (
        <div>
            <input ref={inputRef} type="text" />
        </div>
    );
}

6. useMemo

useMemo 훅은 값의 계산을 메모이제이션하여 성능을 최적화할 수 있게 해줍니다. 특정 값이 변경될 때만 연산을 수행합니다.

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

function ExpensiveComputation({ num }) {
    const compute = (n) => {
        console.log('Computing...');
        return n * 2;
    };

    const result = useMemo(() => compute(num), [num]);

    return <div>Result: {result}</div>;
}

function App() {
    const [number, setNumber] = useState(1);
    const [increment, setIncrement] = useState(0);

    return (
        <div>
            <ExpensiveComputation num={number} />
            <button onClick={() => setNumber(number + 1)}>Change Number</button>
            <button onClick={() => setIncrement(increment + 1)}>Re-render</button>
        </div>
    );
}

7. useCallback

useCallback 훅은 함수의 메모이제이션을 통해 성능을 최적화할 수 있게 해줍니다. 특정 값이 변경될 때만 함수를 재생성합니다.

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

const Button = React.memo(({ handleClick }) => {
    console.log('Button rendered');
    return <button onClick={handleClick}>Increment</button>;
});

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

    const increment = useCallback(() => {
        setCount(count + 1);
    }, [count]);

    return (
        <div>
            <p>Count: {count}</p>
            <Button handleClick={increment} />
        </div>
    );
}

결론

React Hooks는 함수형 컴포넌트에서 상태와 생명 주기 기능을 사용할 수 있게 해주는 강력한 도구입니다. useState, useEffect, useContext, useReducer, useRef, useMemo, useCallback 등 다양한 훅을 통해 코드의 가독성을 높이고, 상태 관리를 효율적으로 할 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 유익한 주제로 찾아뵙겠습니다.