React Hook 정리 - Custom hook (feat. 구조분해할당)

 

우리가 동일 코드를 함수화하여 코드를 최적화 및 간결화 하는 것처럼 React를 개발함에 있어서 사용자 정의 훅을 만들어 사용할 수 있다.
기존에 함수로 만들어 컴퍼넌트 내부에서 사용했던 로직을 Custom Hook으로 만들어 사용하는 것이다.
특히 Custom Hook을 만들어 사용하면 이 Hook 내부에서 다른 기존의 Hook들을 사용할 수 있고, 여기서 사용된 상태들은 모두 독립적인 값을 보장한다. 이를 통해 중복 코드를 줄일 수 있으며, 상태, 이벤트 핸들러, 사이드 이펙트 등을 추상화하여 컴퍼넌트 코드를 간결하게 만들 수 있다.

 

다른 훅들과 동일하게 함수 이름은 'use'로 네이밍해줘야한다.

 

간략하게 useCounter라는 Custom Hook을 만들어보자.

// App.js
import React from 'react';
import { useCounter } from './useCounter';

function App() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h1>App</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default App;


// useCounter.js
import { useState } from 'react';

export function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  const reset = () => {
    setCount(initialValue);
  };

  return { count, increment, decrement, reset };
}

 

 

위 코드에서 useCounter는 초기값을 받아 카운터 상태와 상태를 변경하는 함수들을 반환한다.

count 변수는 현재 카운터의 상태를 나타내고, in/decrement() 함수는 count를 각각 1 증가 또는 감소시키는 함수이다.

reset() 함수로는 카운터를 초기화한다.

 

개인적으로 중요하다고 생각하는 부분은 App.js에서 useCounter를 import한 이후의 플로우이다.

useCounter를 import하고 그 결과 반환되는 배열을 구조분해할당으로 각각의 변수에 할당한다.

 

여기서 구조분해할당은 객체/배열 관계없이 모두 가능하다. 

 

즉, 아래의 두 방식 모두 가능하다는 의미이다.

const { count, increment, decrement, reset } = useCounter(0);
const [ count, increment, decrement, reset ] = useCounter(0);

 

마지막으로 구조분해할당에 대한 개념과 관련 예제코드를 정리하면서 Custom Hooks 및 지금까지 진행했던 React Hooks 정리 블로그를 마치려고 한다.

 

한동안은 React 관련 포스팅 보다는 Dart /Flutter 쪽을 집중할 생각인데 React가 여전히 인기 있는 녀석인 만큼 이후 React 관련 다른 주제로 포스팅을 할 기회가 있으면 좋겠다. <Fin.>

 

📌 참고개념 : 구조분해할당 (Destructuring Assignment)

1. 개념

- 구조분해할당은 객체 또는 배열에서 값을 추출하여 변수에 할당하는 것을 의미한다.

 

2. 예제

// 객체
const person = { name: 'John', age: 25 };

// 객체의 속성을 변수에 할당 (구조 분해 할당)
const { name, age } = person;

// 배열
const numbers = [1, 2, 3];

// 배열의 요소를 변수에 할당 (구조 분해 할당)
const [first, second, third] = numbers;

 

3. 활용

함수의 매개변수로 구조분해할당을 사용해 특정 속성이나 요소만 전달할 수 있다.

// 객체 비구조화를 활용한 함수 매개변수
function printPersonDetails({ name, age }) {
  console.log(`${name} is ${age} years old.`);
}

const person = { name: 'Alice', age: 30 };
printPersonDetails(person);

이러한 구조분해할당은 코드를 간결하게 만들고 가독성을 높이는데 도움이 된다. React에서는 특히 컴퍼넌트의 상태나 속성을 추출하는데 활용된다.