React - Hook에 대해 알아보자

Hooks

Hook은 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존에 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다. 또한 기존 라이플사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있기 때문에 컴포넌트를 함수 단위로 잘게 쪼갤 수 있는 이점이 있다.

 

Hook의 사용규칙

• 최상위에서만 Hook을 호출해야 한다. 좀 더 풀어서 이야기 하자면 반복문, 조건문, 중첩된 함수 내에서 Hook을 실행하면 안된다는 뜻이다. 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 호출되는 것을 보장받기 위해서이다.
• React의 함수형 컴포넌트에서만 Hook을 호출해야하하고, 일반 Javascript함수에서는 Hook을 호출해선 안된다.
• Hook을 만들때는 앞에 use를 붙인다. 그래야지 누구나 봤을때 Hook규칙이 적용되는지를 파악할 수 있다.

Hook의 종류

Hook은 리액트에서 제공하는 기본 Hook및 추가 Hook이 있으며, 필요에 따라 사용자가 만들어서 사용할 수 있는 Custom Hook이 존재한다.

기본 Hooks

• useState
  가장 기본적인 Hook으로, 동적 State 관리를 가능하게 해준다.
• useEffect
  컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정한다.
• useContext
  컴포넌트를 중첩하지 않고도 전역 값을 쉽게 관리할 수 있도록 해준다.

추가 Hooks

• useReducer
  복잡한 컴포넌트들의 state를 관리할 수 있게 하며, 필요에 따라 분리할 수 있게 해준다.
• useCallback
  특정 함수를 재사용할 수 있게 해준다.
• useMemo
  연산한 값을 재사용한다.
• useRef
  DOM을 선택하여 컴포넌트 안에서 조회/수정할 수 있도록 변수화 한다.
• 기타 등등...

이 외에도 몇가지 Hook들이 더 있으며 필요에 따라서 Custom을 할 수도 있지만, 이번 포스팅에서는 가장 많이 쓰이며, 그만큼 가장 중요하다고 할 수 있는 useState와 useEffect를 자세하게 살펴보도록 하자.

 

useState

useState는 가장 기본적인 Hook이고, 함수형 컴포넌트에서도 State를 가변적으로 관리할 수 있게 해 준다. 아래의 코드를 살펴보자.

import React, { useState } from 'react';

const Sample = () => {
    const [value, setValue] = useState(0)
    const [name, setName] = useState('')
    
    const onChangeName = e => {
        setName(e.target.value)
    }
    
    return (
        <>
            <input value={name} onChange={onChangeName} />
            <p>value : <b>{value}</b></p>
            <button onClick={()=> setValue(value + 1)}>plus</button>
            <button onClick={()=> setValue(value + 1)}>minus</button>
        </>
    )
}

useState의 파라미터는 상태의 기본 값을 넣어준다. 해당 파라미터는 리렌더링 시, 개신된 최신 state값이 있다면 무시된다.

useState 함수가 호출되면 배열이 리턴되는데 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는 함수이다. 위의 코드에서는 setValue, setName이라는 함수가 호출되면 value, name이라는 state가 변경되는 것이다.

 

useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다. 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 봐도 무방할 것이다.

import {useState, useEffect} from 'react'

const Sample = () => {
    const[value, setValue] = useState(0);
    const[name, setName] = useState('');
    
    // 렌더링 될 때마다 호출하고 싶을 경우
    useEffect(()=> {
        console.log('렌더링 될때마다 호출합니다.')
        console.log(value)
    })
    
    // 마운트 될 때만 호출하고 싶은 경우
    useEffect(()=> {
        console.log('마운트 될때만 호출합니다.')
    }, [])
    
    // 특정 값만 변할 때 호출하고 싶을 경우
    useEffect(()=> {
        console.log('name이 업데이트 될때만 호출합니다.')
    }, [name])
    
    // cleanup
    useEffect(()=> {
        console.log('useEffect')
        return () => {
            console.log('cleanUp')
        }
    }, [])
    
    const onChangeName = e => {
        setName(e.target.value)
    }
    
    return (
        <>
            <input value={name} onChange={onChangeName} />
            <p>value : <b>{value}</b></p>
            <button onClick={()=> setValue(value + 1)}>plus</button>
            <button onClick={()=> setValue(value + 1)}>minus</button>
        </>
    )

}

useEffect의 두 번째 파라미터를 잘 살펴보자. 두 번째 파라미터는 배열의 형태로, dependancy Array라고 불리우며, 해당 배열안에 값을 넣을 경우 해당 값이 업데이트 될 때만 useEffect Hook이 호출 될 수 있도록 한다. 빈 배열을 넣을 경우 마운트 될 때만 호출한다. 컴포넌트가 언마운트 되기 전이나 업데이트 되기 직전에 어떤 작업을 수행하고 싶다면 clean Up 주석이 달린 코드처럼 함수를 반환해주면 된다.

 

마무리

이번 포스팅에서는 Hook의 기본적인 개념과, 보통 개발할 때 제일 많이 쓰이는 useState와 useEffect 두 종류의 Hook에 대해서 알아보았다. 많이 쓰이는 만큼 잘못 쓰일 수 있음에 항상 주의하며, 가장 효율적으로 쓸 수 있는 방법을 항상 고민해야 할 것이다.