[React] 06. React Hooks 사용하기

# Hooks

Hooks는 리액트 16.8 버전에서 새로 추가된 기능으로 함수형 컴포넌트를 사용하여도 상태 관리나 여러 기능을 할 수 있게 해줍니다. 

대표적으로 useState, useEffect, useReducer, UseMemo등이 있습니다.

 

# useState

useState는 함수형 컴포넌트에서도 state를 관리할 수 있게 해주는 Hooks입니다.

 

useState는 아래와 같이 사용할 수 있습니다.

import React, {useState} from 'react';

 

useState함수의 인자를 사용하여 상태의 초기값을 설정해줄 수 있습니다. 아래 코드에서는 count의 초기값이 0임을 의미합니다.

또한, useState함수가 호출이 되면 [상태, 상태를 갱신해주는 함수]를 반환해줍니다. 아래 코드에서는 count변수의 값을 갱신해주기 위해서 setCount함수를 호출하면 됩니다.

const Counter = () => {

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

    return(
        <div>
            <h1>현재 숫자 : {count}</h1>
            <button onClick={() => {setCount(count + 1)}}> +1 </button>
            <button onClick={() => {setCount(count - 1)}}> -1 </button>
        </div>
    );
};

 

# useEffect

useEffect를 사용하면 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hooks입니다.

import React, {useEffect} from 'react';

 

useEffect함수의 인자로 첫번째 인자는 실행할 함수, 두번째 인자는 검사하고 싶은 값을 넣어줄 수 있어요!

useEffect에서 설정한 함수를 컴포넌트가 마운트 또는 언마운트시에만 호출한다면 두번째 파라미터에 빈 배열을 넣어주면 됩니다.

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


const Counter = () => {

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

    useEffect(() => {
        console.log('실행!');
    },[]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
};
export default Counter;

다음과 같이 코드를 작성하면 console.log('실행'); 문이 Counter컴포넌트가 렌더링 되었을 때 한번만 실행이 됩니다.

 

이와 다르게 특정 값이 갱신될 때만 함수를 실행하고 싶다면 두번째 인자에 검사할 값을 넣어주면 됩니다.

아래 코드에서는 count의 값이 변경될 때마다 useEffect함수가 실행되며 변경된 count값을 콘솔에 보여줍니다.

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


const Counter = () => {

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

    useEffect(() => {
        console.log(count);
    },[count]);

    return (
        <div>
            <p>You clicked {count} times</p>
            <button onClick={() => setCount(count + 1)}>
                Click me
            </button>
        </div>
    );
};
export default Counter;

 

# useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따른 상태를 업데이트할 때 사용하는 Hooks입니다.

Reducer는 현재 상태와 업데이트에 필요한 정보를 담은 액션 값을 전달받아 상태를 반환해주는 함수입니다.

import React, { useReducer } from 'react';

 

다음과 같이 state와 action을 인자로 가지는 reducer를 만들어줍니다.

function reducer(state, action) {

    switch (action.type) {
        case 'INCREMENT':
            return { count: state.count + 1 };
        case 'DECREMENT':
            return { count: state.count - 1 };
        default:
            return state;
    }
}

useReducer 함수의 첫번째 인자에는 리듀서 함수를 두번째 인자에는 리듀서의 초기값을 설정해줍니다.

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

    return (
        <div>
            <p>
                현재 숫자 : {state.count}
            </p>
            <button onClick={() => dispatch({ type: 'INCREMENT' })}>+1</button>
            <button onClick={() => dispatch({ type: 'DECREMENT' })}>-1</button>
        </div>
    );
};

 

# useMemo, useCallback,

useMemo는 렌더링시 특정 값이 바뀌었을 때만 연산을 실행하기 때문에 함수형 컴포넌트에서 연산을 할 때 최적화하여 사용 가능합니다.

 

useCallback은 useMemo와 비슷한 함수로, 주로 렌더링 성능을 최적화할 때 사용합니다. 첫번째 인자에는 생성할 함수를 넣어주고 두번째 인자에는 체크할 값을 배열 형태로 넣어 사용합니다.

 

다음과 같이 빈 배열을 넣어주면 Counter 컴포넌트가 렌더링 될 때 한번만 onChange함수가 생성됩니다.

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

const Counter = () => {

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

    const onChage = useCallback(() => {
        console.log(count);
    },[]);

    return (
        <div>
            <p> 현재 숫자 : {count}</p>
            <button onClick={() => setCount(count + 1)} onChange={onChage}>
                +1
            </button>
        </div>
    );
};
export default Counter;

 

만약 두번째 인자에 값이 있는 배열을 넣어주면, 해당 값이 변경되거나 추가 될 때마다 함수를 생성합니다.