React Hooks의 종류와 사용법

1. useState

useState는 가장 기본적인 훅이며, 컴포넌트 안에서 상태 관리를 해야하는 일이 발생한다면 이 hook을 사용한다.

import React, { useState } from 'react';

const Counter = () => {
	const [value, setValue] = useState(0);
    return (
    	<div>
        	<p>
            	현재 카운터 값은 {value}입니다.
            </p>
            <button onClick={() => setValue(value + 1)}> +1 </button>
            <button onClick={() => setValue(value - 1)}> -1 </button>
        </div>
    );
};

2. useEffect

useEffect는 리액트 컴포넌트가 리렌더링 될 때마다 특정한 작업을 수행하도록 설정할 수 있게 하는 hook이다. useEffect에서는 dependency array를 통해 특정 객체의 상태 값이 변할 때마다 리렌더링 시킬 수 있다. 클래스형 컴포넌트로 치면, componentDidMount, componentDidUpdate, componentWillUnMount의 기능을 제공한다.

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

const Info = () => {
	const [name, setName] = useState('');
    const [nickName, setNickNmae] = useState('');
    
    useEffect(() => {
    	console.log("render success!");
        console.log({
        	name,
            nickname
        });
    });
}

    const onChangeName = (event) => {
        setName(event.target.value);
    };

    const onChangeNickName = (event) => {
        setNickName(event.target.value);
    };

    return (
        ...
    );
};

export default Info;

3. useContext

이 훅은 부모 컴포넌트에서 자식 컴포넌트로 props를 넘기는 과정에서 props drilling에 빠지지 않는다. 또한, 함수형 컴포넌트에서 Context를 보다 쉽게 사용할 수 있다.

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('black');
const ContextSample = () => {
	const theme = useContext(ThemeContext);
    const style = {
    	width: '24px';
        height: '24px';
        background: theme;
    };
    return <div style={style}/>;
};

export default ContextSample;

4. useReducer

이 훅은 useState보다 컴포넌트에서 더 다양한 상황에 상태를 다른 값으로 업데이트 시켜주고 싶을 때 사용한다. 리듀서라는 개념은 Redux를 사용하는 유저는 쉽게 이해할 수 있으며, 이 리듀서 개념은 현재 상태와 업데이트를 위해 필요한 정보를 담은 action 값을 받아 새로운 상태를 반환해주는 함수이다. 이 리듀서 함수의 특징은 새로운 상태를 만들 때 꼭 불변성을 지켜주어야한다.

 

5. useMemo

이 훅을 사용한다면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화 할 수 있다. 단순히 useState 훅을 사용하면 state가 수정될 때마다 setState 함수가 반복적으로 호출되며, 렌더링 될 때마다 함수 내에서 게산이 진행되는데, useMemo Hook을 사용하면 이러한 작업을 최적화 시킬 수 있다. 렌더링 하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하며, 만약 원하는 값이 바뀐 것이 아니라면 이전에 연산했던 결과를 다시 사용하는 방식이다.

 

6. useCallback

이 훅은 useMemo 훅과 상당히 비슷한 함수이다. 주로 렌더링 성능을 최적화해야하는 상황에서 사용을 하며, 이벤트 핸들러 함수를 필요할 때만 생성할 수 있는 기능을 제공한다.

 

7. useRef

useRef Hook은 함수형 컴포넌트에서 Ref를 쉽게 사용할 수 있도록 해준다. useRef를 사용하여 ref를 설정하면 useRef를 통해 만든 객체 안의 current 값이 실제 엘리먼트를 가르키게 된다.

 

이 외에도 react hook from, useInput, useWindowSize 등의 커스텀 훅이 존재하며, 다른 개발자들이 만든 Hooks도 라이브러리로 설치하여 사용이 가능하다.

---

레퍼런스

[React] class 형 컴포넌트 vs function 형 컴포넌트