React) Hook, useState, useEffect

Hook

`Hook`은 `React 16.8` 부터 생긴 기능으로, 기본 `React Class` 컴포넌트에서 제공하던 상태관리 기능 및 생명주기 함수를 함수형 컴포넌트에서 사용할 수 있게 해주는 기능입니다. 

 

`Class Component` 에서 상태관리 기능은 `this.state` 와 `this.setState` 두 가지로 관리할 수 있었습니다. 하지만 함수형 컴포넌트에서는 사용이 불가한 상황으로 `useState`, `useEffect` 두 가지로 클래스 컴포넌트와 같은 함수들을 사용할 수 있도록 한 것이 `Hook` 입니다. 

클래스 생명주기 함수들에서 변경이 일어나면 어떠한 작업이 일어나는데 이러한 작업들을 `side effect`라고 지칭하고 있습니다. 이러한 `side effect`에 대한 부분들이 컴포넌트 생명주기에 맞게 구독하거나 해지하는 기능을 제공하는 기능을 함수형 컴포넌트에서도 수행 할 수 있도록 `Hook`에서 제공하고 있습니다. 

 

useState

`useState`는 클래스 컴포넌트에서 `this.state`를 지정하는 것과 같은 기능을 수행하고 있습니다. 즉, 상태에 대한 초기 변수를 지정하고 할당하는 기능을 수행하고 있습니다. 이렇게 할당된 `state` 들은 메모리 힙에 저장되게 됩니다. 

 

`useState`의 반환값으로 `[something, setSomthing]` 을 반환하는데, 이때 대괄호 안에 변수가 할당 되는 것을 배열 구조 분해라고 합니다. 

import React, { useState } from 'react';

function Example() {
  // 새로운 state 변수를 선언하고, count라 부르겠습니다.
  const [count, setCount] = useState(0);

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

 

useEffect

`useEffect`는 클래스 컴포넌트 생명주기 함수를 함수형 컴포넌트에서 사용 할 수 있도록 하는 함수입니다. 또한, `useEffect`는 `clean-up` 함수 시행여부에 따라 구분이 되어지고 있습니다. 

 

여기서 clean-up 이라는 것은 메모리 힙에 올라간 인스턴스를 삭제하여야 하는 작업을 의미합니다. 

 

`useEffect` 두 번째 인자로 전달되는 배열에 따라 실행 조건이 결정됩니다.

• 의존성 배열이 비어있는 경우: 컴포넌트가 마운트될 때 한 번만 실행되고, 언마운트될 때 정리 함수가 실행됩니다.
• 의존성 배열에 변수가 포함된 경우: 배열 내의 변수가 변경될 때마다 효과가 실행됩니다.
• 의존성 배열 없는 경우: 컴포넌트가 리렌더링될 때마다 실행됩니다.