ReactJS _ React Hook 이란?

 

 

Hook은 React 16.8버전에서 도입된 기능으로, 함수형 컴포넌트에서 상태(state)와 라이프사이클 기능을 사용할 수 있게 해줍니다. Hook은 React의 핵심 기능 중 하나로, 함수형 컴포넌트에서도 클래스형 컴포넌트처럼 상태를 관리하거나, 컴포넌트의 생명주기를 처리할 수 있도록 합니다. 대표적인 Hook으로는 useState(), useEffect(), useContext() 등이 있으며, 이를 통해 코드의 가독성을 높이고 재사용 가능한 로직을 작성할 수 있습니다.

 

 

Hook의 특징

1. 함수형 컴포넌트 전용 : Hook은 클래스형 컴포넌트에서는 사용할 수 없습니다.
2. 상태 및 라이프사이클 관리 : useState()로 상태 관리, useEffect()로 라이프사이클 이벤트를 처리할 수 있습니다.
3. 재사용 가능한 코드 작성 : 사용자 정의 Hook을 통해 복잡한 로직을 분리하고 재사용할 수 있습니다.

 

 

대표적인 React Hook

• useState() : 컴포넌트의 상태를 선언하고 관리하는 Hook

const [count, setCount] = React.useState(0);
setCount(count + 1);

 

• useEffect() : 컴포넌트가 마운트, 업데이트, 언마운트될 때 실행되는 사이드 이펙트 처리를 위한 Hook

React.useEffect(() => {
    console.log("Component Mounted");
    return () => console.log("Component Unmounted");
}, []);

 

• useContext() : 컴포넌트 트리에서 전역 데이터를 손쉽게 공유하기 위한 Hook

const theme = React.useContext(ThemeContext);
console.log(theme); // dark 또는 light

 

• useReducer() : 복잡한 상태 관리 로직을 처리하기 위한 Hook으로, reducer 함수를 기반으로 상태를 업데이트함

const [state, dispatch] = React.useReducer(reducer, initialState);
dispatch({ type: 'increment' });

 

• useRef() : DOM 요소에 직접 접근하거나 변수 값을 유지하기 위해 사용되는 Hook

const inputRef = React.useRef(null);
inputRef.current.focus();

 

 

사용자 정의 Hook (Customer Hook)

사용자 정의 Hook을 사용하면 반복되는 로직을 분리하여 재사용 할 수 있습니다.

function useWindowSize() {
    const [size, setSize] = React.useState({ width: window.innerWidth, height: window.innerHeight });

    React.useEffect(() => {
        const handleResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });

        window.addEventListener("resize", handleResize);

        return () => window.removeEventListener("resize", handleResize);
    }, []);

    return size;
}

function App() {
    const size = useWindowSize();

    return <p>Window size : {size.width} x {size.height}</p>
}

// useWindowSize는 사용자 정의 Hook으로, 윈도우 크기 변경 시 업데이트 되는 상태를 제공

 

 

Hook 사용 시 규칙

1. 최상위 레벨에서만 호출
   Hook은 함수형 컴포넌트의 최상위에서만 호출해야 합니다. 조건문이나 반복문 내부에서 호출하면 안됩니다.
2. React 함수 내부에서만 사용
   Hook은 React 함수형 컴포넌트 또는 사용자 정의 Hook 내부에서만 사용할 수 있습니다.

 

 

Hook의 장점과 단점

장점

1. 클래스형 컴포넌트를 대체
   함수형 컴포넌트만으로 상태 관리 및 라이프사이클을 처리할 수 있습니다.
2. 가독성과 코드 재사용성 향상
   사용자 정의 Hook을 통해 중복되는 로직을 줄일 수 있습니다.
3. 간단한 코드 구조
   this 키워드 없이 상태와 메서드를 관리할 수 있습니다.

 

단점

1. 비동기 코드 처리의 복잡성
   useEffect() 내에서 비동기 작업을 처리할 때 코드를 잘못 작성하면 무한루프나 메모리 누수가 발생할 수 있습니다.
2. Hook 규칙을 반드시 따라야함
   특정 규칙을 지키지 않으면 런타임 오류가 발생합니다.
3. 복잡한 상태 관리
   매우 복잡한 상태 관리가 필요한 경우 useReducer()를 사용해야 하는 등 코드가 길어질 수 있습니다.

 

 

---

 

 

React Hook은 함수형 컴포넌트에서 상태 관리 및 라이프사이클을 처리하기 위한 중요한 기능입니다. useState(), useEffect()와 같은 기본 Hook을 통해 간단한 상태 관리와 사이드 이펙트 처리를 할 수  있으며, useReducer()와 사용자 정의 Hook을 통해 복잡한 로직도 구현할 수 있습니다. Hook을 사용하면 클래스형 컴포넌트의 복잡함을 줄이고 간결한 함수형 컴포넌트를 작성할 수 있게 됩니다.