React

[React] Hooks란?

_doit 2024. 9. 9. 19:09
728x90
반응형

1. Hooks란 무엇인가?

Hooks는 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태와 생명 주기를 쉽게 관리할 수 있게 해준다. 가장 자주 쓰는 두 가지 Hooks를 소개해보자(이 외에도 useMemo, useContext 등이 있다)

  1. useState: 컴포넌트의 상태(state)를 관리할 수 있는 hook . 클래스 컴포넌트에서 this.state 대신 쓰는 기능이다.
const [name, setName] = useState(''); // name이라는 상태를 만들고 초기값을 ''로 설정

 

2. useEffect: 렌더링 후 side effects를 처리할 수 있도록 설계된  hook. 컴포넌트가 처음 나타날 때나 업데이트될 때, 또는 사라질 때 특정 작업을 할 수 있게 해준다. 생명 주기를 대신한다고 생각하면 된다.useEffect는 두 번째 인자로 빈 배열([])을 넣으면 컴포넌트가 처음 나타날 때 한 번만 실행된다. 만약 상태가 변경될 때도 실행하고 싶다면, 그 상태를 배열에 넣으면 된다.

useEffect(() => { // 이 코드는 컴포넌트가 처음 나타날 때 실행된다. }, []);

 

2. React Hooks가 왜 필요한가?

먼저 React는 컴포넌트라는 작은 조각들을 모아서 화면을 만든다. 이 컴포넌트는 크게 두 가지 방식으로 만들 수 있다:

  1. 클래스 컴포넌트: 예전 방식으로 더 복잡하고 길지만, 다양한 기능을 제공한다.
  2. 함수형 컴포넌트: 더 간단하고 코드가 짧지만, 예전에는 기능이 제한적이었다.

React가 처음에는 클래스 컴포넌트만으로 복잡한 기능을 구현했지만, 코드가 길어지고 반복되는 부분이 많았다. 그래서 React 팀은 더 간단한 함수형 컴포넌트에서도 강력한 기능을 쓸 수 있도록 Hooks라는 기능을 만들었다.

3. 클래스 컴포넌트 vs 함수형 컴포넌트

클래스 컴포넌트 예시

import React, { Component } from 'react';
import Axios from 'axios';

export default class Hello extends Component {
  constructor(props) {
    super(props);
    this.state = { name: '' };  // state 초기화
  }

  // 컴포넌트가 처음 마운트될 때 (화면에 나타날 때)
  componentDidMount() {
    Axios.get('/api/user/name')
      .then(response => {
        this.setState({ name: response.data.name }); // API에서 받은 데이터를 state에 저장
      });
  }

  render() {
    return (
      <div>
        My name is {this.state.name}
      </div>
    );
  }
}

함수형 컴포넌트 + Hooks 예시

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

export default function Hello() {
  const [name, setName] = useState(''); // useState로 상태 관리

  // useEffect로 생명 주기와 비슷한 기능 구현
  useEffect(() => {
    Axios.get('/api/user/name')
      .then(response => {
        setName(response.data.name);  // API에서 받은 데이터를 state에 저장
      });
  }, []); // 빈 배열을 넣으면 처음 한 번만 실행

  return (
    <div>
      My name is {name}
    </div>
  );
}

비교

  • 클래스 컴포넌트는 상태를 관리하기 위해 this.state, constructor, componentDidMount, render 와 같은 메서드를 각각 사용한다. 생명 주기 함수라는 개념도 필요하다.
  • 반면, Hooks를 사용하는 함수형 컴포넌트는 useState와 useEffect만 있으면 훨씬 짧고 간단한 코드로 같은 기능을 구현할 수 있다.

+) React 생명 주기란?

React 컴포넌트는 화면에 나타날 때, 업데이트될 때, 사라질 때 특정 작업을 할 수 있다. 이를 생명 주기라고 부른다.

  • Mounting(마운팅): 컴포넌트가 화면에 처음 나타날 때 (componentDidMount).
  • Updating(업데이트): 컴포넌트가 변경되거나 다시 그려질 때 (componentDidUpdate).
  • Unmounting(언마운팅): 컴포넌트가 화면에서 사라질 때 (componentWillUnmount).

이런 생명 주기를 클래스 컴포넌트에서는 각각의 함수로 관리했지만, Hooks를 사용하면 useEffect 하나로 해결할 수 있다.

4. Custom Hook (사용자 정의 훅)이란?

Custom Hook은 반복되는 로직을 하나의 함수로 만들어서, 여러 컴포넌트에서 쉽게 재사용할 수 있게 해주는 기능이다.

Custom Hook 예시: useAuth

import { useState, useEffect } from 'react';
import Axios from 'axios';

function useAuth() {
  const [user, setUser] = useState(null);

  useEffect(() => {
    Axios.get('/api/user')
      .then(response => {
        setUser(response.data);
      });
  }, []);

  return user;
}

// 이 Hook을 여러 컴포넌트에서 사용할 수 있다.
export default function Profile() {
  const user = useAuth();

  if (!user) return <div>Loading...</div>;

  return <div>Welcome, {user.name}!</div>;
}

Custom Hook의 장점

  • 여러 컴포넌트에서 같은 로직을 반복하지 않고 재사용할 수 있다.
  • 코드가 훨씬 깔끔해지고 유지보수가 쉬워진다.

5. 정리

  • React Hooks는 함수형 컴포넌트에서 상태와 생명 주기를 간단하게 관리할 수 있는 도구다.
  • 클래스 컴포넌트보다 코드가 짧고 이해하기 쉽다.
  • useState로 상태를 관리하고, useEffect로 생명 주기 작업을 처리할 수 있다.
  • Custom Hook을 이용하면 여러 컴포넌트에서 반복되는 코드를 재사용할 수 있다.

 

끝😊

728x90
반응형