[React.js] 리액트 훅에 대해서, 여러가지 함수

리액트 훅(Hooks)은 리액트 v16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 state와 생명주기 기능을 사용할 수 있게 해줍니다. 기존에는 클래스 컴포넌트에서만 사용할 수 있었던 이러한 기능들을 함수형 컴포넌트에서도 사용할 수 있게 되어, 코드의 재사용성과 구조화가 더욱 쉬워졌습니다.

주요 훅 함수는 다음과 같습니다.

1. useState
이 함수는 상태 값을 추가할 수 있게 해주며, 초기 상태값을 인자로 받습니다. 이 함수는 상태값과 해당 상태를 갱신할 수 있는 함수를 반환합니다.

2. useEffect
이 함수는 생명주기 함수인 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 합친 것입니다. useEffect 내부에서 수행하고 싶은 작업을 넣을 수 있습니다.

3. useContext
이 함수는 컴포넌트 내에서 리액트 Context를 사용할 수 있게 해줍니다.

4. useReducer
이 함수는 상태 업데이트 로직을 컴포넌트 밖으로 분리할 수 있게 해줍니다.

5. useRef
이 함수는 .current 프로퍼티로 전달된 인자(initial value)를 가리키는(referring) 변경 가능한(ref) 객체를 반환합니다.

코드 예시(useEffect) :

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

function Example() {
  // useState를 사용하여 count라는 state 변수를 선언합니다.
  const [count, setCount] = useState(0);

  // componentDidMount와 componentDidUpdate와 같은 역할을 합니다.
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

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

위의 예시에서는 useState를 사용하여 count라는 상태 변수를 선언하였고, setCount 함수를 통해 상태를 갱신하고 있습니다. 또한 useEffect를 사용하여 count 값이 변경될 때마다 문서의 제목을 갱신하고 있습니다. 이렇게 훅을 사용하면 함수형 컴포넌트에서도 상태 관리와 생명주기 메서드를 사용할 수 있습니다.