[React] 05. 리액트 Hooks

오늘은 React Hooks에 대해 간단히 정리해보려고 합니다.

💚Hooks

react 16.8 버전에서 새로 추가된 기능
함수형 컴포넌트에서도 상태관리나 그 외 기능을 수행하도록 함
대표적으로 useState,useEffect,useReducer,useMemo등이 존재

💚useState

state포스팅에서 잠깐 다루었던 개념인데요!
다시 정리해보자면, useState는 함수형 컴포넌트에서 state를 관리할 수 있게 해주는 Hooks입니다.

먼저, useState를 사용하기 전에 import를 해줍니다.

import {useState} from "react";

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

+1버튼을 누르면 setCount(count + 1)이 작동되면서 count를 +1만큼 갱신해줍니다.

반대로 -1버튼을 누르면 setCount(count - 1)이 작동되면서 count를 -1만큼 새로운 상태로 갱신해줍니다.

💚useEffect

useEffect는 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hooks인데요!

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;

위 코드와 같이 []빈 배열을 두번째 인자로 넣어주면,

💚useReducer

useReducer는 컴포넌트의 상황에 따른 상태를 업데이트할 때 사용하는 Hooks입니다. useReducer를 사용하면 상태 로직과 컴포넌트를 분리시킬 수 있다는 장점이 있습니다.

useReducer를 사용하기 전에 먼저 import가 필요합니다.

import { useReducer } from 'react';

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

그리고 다음과 같이 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()를 사용하여 첫번째 인자에는 위에서 만든 reducer()함수를, 두번째 인자에는 reducer의 초기값을 설정해줍니다.

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

💚useCallback

useCallback은 주로 렌더링 성능을 최적화할 때 사용하는데요. 생성할 함수와 배열형태의 체크할 값을 인자로 받아요!

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

const Counter = () => {

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

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

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

위에 코드와 같이 []빈 배열을 두번째 인자로 넣어주면 Counter컴포넌트가 렌더링 될 때 딱 한번만 onChangeCount()함수가 생성됩니다.

반대로 배열에 값이 있따면, 해당 값이 변경되거나 추가 될 때마다 함수를 생성해줍니다.

💚useMemo

useMemo는 useCallback과 유사한 Hooks인데요. useMemo는 이전에 사용한 값을 재사용하기 때문에 렌더링 성능을 최적화할 수 있습니다.

오늘은 리액트의 다양한 hooks에 대해 공부해 보았는데요. hooks를 잘 활용하여 좀 더 최적화할 수 있는 코드를 만들도록 해봐야겠어요!

참고 자료 및 사이트

React 공식문서
벨로피트와 함께하는 모던 리액트