[React] Hook에 대해 정확히 이해해보자📌

🚀 Hook에 대해 정확히 이해해보자 ..😂 

React를 공부하고 있지만, 정확하게 "Hook에 대해 설명해봐" 하면 어... 하게 되어서 이번 기회에 한번 제대로 정리해보려고 합니다 :) 제가 커스텀 훅을 제대로 만들지 못하는 이유가 Hook에 대해 정확하게 이해하고 있지 못해서라고 생각이 들어서이기도 합니다..

Hook이 등장하게 된 배경

Hook은 리액트 16.8 버전 이후로 추가된 기능이며, Hook이 등장하기 전에는 상태를 관리하기 위해 class를 작성했었습니다.

Hook이 등장하기 전 리액트에는 여러 문제들이 존재했습니다.

 

• 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어려웠다. Hook은 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다.
• 생명주기 컴포넌트로 인한 복잡한 컴포넌트는 이해하기 어려웠다. 상태 관련 로직이 모두 같은 공간에 있기 때문이었다. Hook을 통해 로직에 기반을 둔 작은 함수로 컴포넌트를 나눌 수 있다.

그래서 Hook이라는 건

class가 아닌 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 기술이라고 할 수 있겠습니다.

React에서 상태 관리가 중요한 이유

React에서 상태 관리를 해야 하는 이유는 React는 컴포넌트가 변화할 때 리렌더링이 되는데, 가상 DOM에서 변경된 부분만을 캐치해서 실제 DOM에 반영시켜줍니다. 따라서 우리는 이러한 리렌더링을 통해서 우리가 원하는 값을 변경시켜 보여주는 것입니다. 따라서 우리가 변경하고 싶은 값이 있다면 상태를 업데이트 시켜줌으로써 화면에 그 변경 사항을 반영해주어야 합니다.

Hook이라는 게 없을 때 React에서는 이렇게 상태 관리를 했다

다음과 같이 useState라는 Hook을 사용한 함수형 컴포넌트가 있다고 해봅시다.

// useState를 사용한 함수형 컴포넌트
import React, { useState } from 'react';

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

  function handleClick() {
    setCount(count + 1);
  }

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

위와 동일한 기능을 하는 클래스형 컴포넌트를 작성하면 아래와 같습니다.

// state를 사용한 클래스 컴포넌트
import React from 'react';

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={this.handleClick}>
          Click me
        </button>
      </div>
    );
  }
}

동일한 기능을 하고 있는 두 코드를 살펴보면, Hook을 사용한 함수형 컴포넌트가 보다 간결해 가독성 향상에도 좋습니다. 또한 성능에 있어서도 함수형 컴포넌트가 클래스형 컴포넌트보다 더욱 빠릅니다.

Hook의 주요 장점

1. 클래스 컴포넌트 없이 상태 관리가 가능해진다.
   React Hook을 사용하면 함수형 컴포넌트에서도 상태를 관리할 수가 있다.
   이로 인해 클래스 컴포넌트 없이도 상태 관리를 할 수 있으므로 코드가 더 간결하고 가독성이 좋아진다.
2. 코드의 재사용성이 높아진다.
   React Hook을 사용하면 여러 컴포넌트에서 동일한 상태와 생명주기를 재사용할 수 있다.
   이는 컴포넌트 간의 코드 중복을 줄이고, 코드의 재사용성을 높여준다.
3. 생명주기 메소드의 코드를 간결하게 작성할 수 있다.
   React Hook을 사용하면 생명주기 메소드와 관련된 코드를 더 간결하게 작성할 수 있다.
   예를 들어 'useEffect'를 사용하면 컴포넌트의 마운트, 언마운트, 업데이트와 관련된 코드를 모두 한 곳에서 처리할 수 있다.
4. 테스트가 용이해진다.
   React Hook을 사용하면 함수형 컴포넌트의 상태와 생명주기를 테스트하기 용이해진다.
   이는 컴포넌트의 테스트를 더욱 쉽게 만들어준다.
5. 유지보수에 좋다
   React Hook은 계속해서 발전될 것으로 예상되어, React Hook을 사용하면 앞으로도 React를 업데이트하며 유지보수하는 데 도움이 된다.

커스텀 훅

상태도 중복되어 선언되는 부분이 분명히 있을 수 있습니다. 그러면 당연히 컴포넌트는 복잡해지기 마련입니다. 따라서 이럴 때는 커스텀 훅을 만들어 로직을 재사용할 수 있게 됩니다.

 

📜 Hooks/useFetch.js 파일

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  
  useEffect(() => {
    const fetchData = async () => {
      const res = await axios.get(url);
      setData(res.data);
      setLoading(false);
    }
    fetchData();
  }. [url])
  
  return { data, loading }
}

📜 App.js 파일

function App() {
  const { data, loading } = useFetch('https://api.example.com/data');
  
  if(loading) <Loading />
  return(
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

useFectch라는 커스텀 훅을 정의하고, App에서 해당 커스텀 훅을 사용합니다. 커스텀 훅에서 반환하는 상태를 사용하여 리렌더링합니다. 이를 통해, 데이터를 가져오기 로직을 여러 컴포넌트에서 재사용할 수 있게 됩니다.

일반 함수와 Hook함수의 차이점 ✨

1. 상태(State) 관리
   Hook 함수에서는 상태를 관리하기 위해 useState라는 Hook 함수를 사용합니다. 반면, 일반 함수에서는 상태를 관리하지 않습니다.
2. 생명주기(Lifecyle) 관리
   함수에서는 Hook 함수를 사용하여 생명 주기를 관리합니다. 일반 함수에서는 생명 주기를 관리하지 않습니다.

결론적으로는, 상태 관리를 위한 함수라면 Hook 함수가 되고, 상태 관리와는 무관한 함수라면 일반 함수로 작성합니다. Hook 함수는 해당 함수가 Hook 함수임을 쉽게 알 수 있도록 함수명 앞에 use를 붙이는 경우가 많습니다.