[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