[React.js] 훅(Hook)

훅(Hook)

들어가며

• 리액트(React)에서 사용되는 기본적인 훅(Hook)들에 대해 알아보자.

 

훅(Hook)

개념

• 함수 컴포넌트에서 상태(State)나 생명주기 기능 등을 사용할 수 있도록 도와주는 기능
• 클래스 컴포넌트의 기능을 함수 컴포넌트에서도 사용할 수 있게 해준다.
• 가장 널리 사용되는 훅으로는 @useState@, @useEffect@, @useContext@ 등이 있다.
  
  • 각각의 훅을 활용하면 함수 컴포넌트에서 상태 관리, 부수 효과 처리, 전역적인 데이터 공유 등을 편리하게 할 수 있다.
  • 이 외에도 많은 다양한 훅이 있으며, 직접 커스텀 훅을 만들어 사용할 수도 있다.
  • 훅을 사용하면 함수 컴포넌트에서 상태를 관리하고, 생명주기 메서드를 이용할 수 있어 훨씬 간결하고 유연한 코드를 작성할 수 있게 된다.

 

종류

① useState

• 함수 컴포넌트에서 상태(State)를 관리할 수 있도록 도와준다.
• 이 훅을 사용하면 상태를 선언하고 업데이트할 수 있다.

 

예제 코드 : 버튼 클릭 시, 숫자 값 1씩 증가

import React, { useState } from 'react';

function Counter() {
  // count 상태와 이를 업데이트하는 setCount 함수를 선언
  const [count, setCount] = useState(0);    // 초기값 : 0

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

 

• @useState@ 훅을 사용하여 @count@라는 상태와 이를 업데이트하는 @setCount@ 함수를 선언한다.
• @count@ 상태는 초기값으로 @0@을 가진다.
• 버튼을 클릭할 때마다 @setCount@를 통해 @count@ 값을 증가시킨다.

 

② useEffect

• 부수 효과(Side Effects)를 다루는 데 사용된다.
• 컴포넌트가 렌더링될 때와 업데이트될 때 특정 작업을 수행하는 데 사용된다.
• API 호출, 이벤트 구독 등에 사용된다.

 

예제 코드 : API 호출

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

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // API 호출 등의 작업을 수행한다.
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => setData(result))
      .catch(error => console.error(error));
  }, []); // 빈 배열은 컴포넌트가 처음 렌더링될 때만 실행됨을 의미한다.

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

 

• @useEffect@ 훅을 사용하여 컴포넌트가 렌더링될 때 API를 호출하고 데이터를 가져오는 작업을 수행한다.
• 빈 배열 @[]@을 전달하여 컴포넌트가 처음 렌더링될 때만 @useEffect@가 실행되도록 한다.
• 데이터가 있으면 해당 데이터를 표시하고, 데이터가 없을 경우 @Loading...@을 표시한다.

 

③ useContext

• 컴포넌트 트리 전체에서 전역적으로 데이터를 공유할 수 있도록 도와준다.

 

예제 코드 : 테마 변경

import React, { useContext } from 'react';

// Context 생성
const ThemeContext = React.createContext('light');

function ThemedComponent() {
  // Context를 사용하여 값을 가져옵니다.
  const theme = useContext(ThemeContext);

  return <p>Current Theme: {theme}</p>;
}

// 어떤 다른 곳에서 해당 Context의 값을 변경하고 싶을 때
function ThemeToggler() {
  const theme = useContext(ThemeContext);

  const toggleTheme = () => {
    // 테마 변경 로직
  };

  return (
    <button onClick={toggleTheme}>
      Toggle Theme
    </button>
  );
}

 

• @createContext@를 사용하여 새로운 @Context@를 생성한다.
• @useContext@ 훅을 사용하여 해당 @Context@의 값을 가져와 컴포넌트에서 사용한다.
• @ThemeToggler@ 함수에는 버튼을 클릭하여 테마를 변경하는 로직을 넣을 수 있다.

 

참고 사이트

Built-in React Hooks – React