Hook이란?
클래스형 컴포넌트에서 사용할 수 있었던 state 정의, state 업데이트, 생명 주기 함수를
함수형 컴포넌트에서도 사용할 수 있게 해주는 기술입니다.
Hook 중에서 자주 사용하는 몇가지 입니다.

useState

컴포넌트에 특정 값을 추가할 때 사용합니다.

사용법

const [변수명, set함수명] = useState(초기값);

Bad

import React, { useState } from "react";

function Counter(props) {
    var count = 0;

    return (
        <div>
            <h1>클릭 횟수 : {count}</h1>
            <button onClick={() => count++}>
                클릭
            </button>
        </div>
    )
}

위 예제는 버튼 클릭할 때 마다 count의 값은 증가하지만 재 렌더링이 일어나지 않아 화면에 표시되지 않습니다.

Good

import React, { useState } from "react";

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

    return (
        <div>
            <h1>클릭 횟수 : {count}</h1>
            <button onClick={() => setCount(count + 1)}>
                클릭
            </button>
        </div>
    )
}

count의 값이 바뀜에 따라 재렌더링이 일어나 화면에 표시되게 됩니다.

useEffect

사용법

useEffect(이펙트 함수, 의존성 배열);

의존성 배열이 변경되었을때 이펙트 함수가 실행됩니다.
이펙트 함수는 첫 렌더링시, 재렌더링시 실행 됩니다.
의존성 배열에 빈 배열([])을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행 됩니다.
의존성 배열을 생략하면 컴포넌트가 업데이트 될 때마다 실행 됩니다.

function useStatus(props) {
    const [count, setCount] = useState(0);
    useEffect(() => {
        document.title = `총 ${count}번 클릭했습니다.`;
    });

    const [isOnline, setIsOnline] = useState(null);
    useEffect(() => {
        ServerAPI.setUserStatus(props.user.id, toggleStatus);
        return () => {
            ServerAPI.resetUserStatus(props.user.id, toggleStatus);
        }
    });

    function toggleStatus(status) {
        setIsOnline(status.isOnline)
    }
}

useMemo

동일한 연산을 반복수행 할 때 연산한 결과를 저장해두고 동일한 연산시에 이를 생략하여
프로그램의 실행 속도를 높이는 Hook 입니다.

사용법

const memoizedValue = useMemo(() => {
        // 연산량이 높은 작업을 수행하여 결과를 반환
        return computedExpensiveValue(의존성 변수1, 의존성 변수2);
    },[의존성 변수1, 의존성 변수2]
);

import { useMemo } from 'react';

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

현재 할일 목록과 tab 활성화가 변경 되었을 경우에만 함수가 실행 됩니다.
useEffect는 값이 변할때마다 실행을 하는 개념이고,
useMemo는 특정 결과값을 캐싱 해놓는다는 개념으로 접근하면 쉽습니다.

useCallback

useMemo Hook과 유사하지만 값 대신 함수를 반환합니다.

사용법

const memoizedCallback = useCallback(() => {
        doSomething(의존성 변수1, 의존성 변수2);
    },[의존성 변수1, 의존성 변수2]
)

동일한 기능의 useMemo와 useCallback

useCallback(함수, 의존성 배열);
useMemo(() => 함수, 의존성 배열);

useMemo와 마찬가지로 특정함수를 캐싱해 놓는다고 생각하면 쉽습니다.
물론 의존성 배열 값이 바뀌면 함수는 재정의 됩니다.

useRef

특정 요소를 참조하는 Hook 입니다.

사용법

const refContainer = useRef(초기값);

function textInput(props) {
    const inputElem = useRef(null);

    const onButtonClick = () => {
        inputElem.current.focus();
    };

    return (
        <input ref={inputElem} type="text" />
        <button onClick={onButtonClick}>
            Focus the Input
        </button>
    )
}