React - Hooks 1 (useState, useEffect)

오늘은 Hooks에 대해 알아보려한다.
React의 Hooks는 React 개발자 채용 공고에서 'Hooks를 이해하고 있는 사람'를 봤을 정도로 중요한 개념이라고 생각한다.
나도 React로 개발을 시작(개인 포폴용 사이트)하고 가장 많이 사용하고 있는 것이 Hooks라고 생각한다.

Hooks란?

Hooks는 React 16.8 버전에서 새롭게 도입된 기능으로 React 개발에서 상태 관리와 부수 효과 처리를 더 편리하고 간결하게 만들어주는 도구이다.

...
const MainCareerComponent: React.FC = () => {
    // NOTE(hajae): 상태(state) 관리를 위한 useState 훅 사용
    const [mainCareerVisible, setMainCareerVisible] = useState(false);
...

위 코드가 Hooks의 한 종류인 useState 를 이용한 예시이다.
일반적으로는 변수를 선언, 초기화하고 getter, setter 를 만드는 것과 같은 작업이 필요하지만 React에서는 이와 같이 간단하게 상태관리를 할 수 있다.

Hooks의 종류

useState

useState 는 React의 기본 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 추가하고 관리하는데 사용된다.

import React, { useState } from 'react';

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

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
};

위 코드에서는 useState() 함수를 이용해서 count 의 상태 관리를 하는데, useState(0) 함수의 인자값(0)으로 초기화한다.
또, button을 만들어서 onClick 이벤트가 발생했을 때, increment 함수가 실행되어, setCount 를 이용해 count 의 값을 1 증가시킨다.

이처럼 useState 는 가장 기본적으로 사용되고 있는 React의 Hook의 한 종류이다.

useEffect

useEffect 는 React의 기본 내장 Hook 중 하나로, 함수형 컴포넌트에서 부수 효과(side effect)를 처리하는데 사용된다.
Angular를 주로 사용했던 나는 처음 useEffect 를 사용했을 때, RxJS 의 subscribe 와 같은 기능을 하는 것으로 이해하고 사용했다.
Angular에서는

...
this.hoge.subscribe((x) => { ... })
...

이런식으로 hoge 값의 변화를 감지하고 변화가 있을 경우 실행하는 메서드가 있었는데 useEffect 도 같은 기능을 한다.

그럼 이제 useEffect 를 살펴보면

...
useEffect(() => {
    // 상태(count)가 변경될 때마다 실행되는 로직
    console.log('count is changed!');

    // 컴포넌트가 언마운트 될 때 함수를 반환
    return () => {
      console.log('Component is unmounted!');
    };
}, [count]);
...

위 코드와 같이 작성하고 useState 에서 작성한 코드에서 increment 함수가 실행되는 등 상태(count)의 값이 변화하면 useEffect 가 실행된다.
상태(count)의 값이 변화하는 것 뿐만 아니라, 컴포넌트가 마운트 될 때도 실행된다.
useEffect 의 두 번째 인자(위 코드에선 [count])는 해당 배열에 포함된 값들이 변경될 때만 useEffect가 실행된다.

※ 마운트: 컴포넌트의 인스턴스가 DOM에 삽입되어 화면에 표시되는 과정

React의 Hooks의 종류는 더 많지만 내용이 많이 길어지니 조금씩 나눠서 작성하도록 하겠습니다.

아직 많이 알아가는 단계라서 역시 틀린부분이 있을 수 있으니 언제든 피드백 부탁드립니다.