[React] 배열 디스트럭처링(array destructuring) - Hook

| 배열 디스트럭처링의 기본 개념

배열 디스트럭처링(array destructuring)은 JavaScript의 ES6(ECMAScript 2015) 기능으로, 배열의 요소를 쉽게 추출하여 변수에 할당할 수 있게 해주는 문법이다. 이 문법은 리액트의 훅(예: useState)을 사용할 때 매우 유용하다.

즉, 배열 디스트럭처링은 배열의 요소를 분해하여 별개의 변수에 할당하는 방식이다.

 

const fruits = ['Apple', 'Banana', 'Cherry'];

// 배열 디스트럭처링
const [firstFruit, secondFruit, thirdFruit] = fruits;

console.log(firstFruit); // Apple
console.log(secondFruit); // Banana
console.log(thirdFruit); // Cherry

• 여기서 배열 fruits의 요소를 순서대로 firstFruit, secondFruit, thirdFruit 변수에 할당한다. 기존 배열을 선언하는 방식과 배열이름, 배열요소를 보여주는 방식이 반대이다.

 

| React에서의 배열 디스트럭처링 & Hook

리액트의 useState 훅은 배열을 반환하기 때문에 배열 디스트럭처링을 사용하여 상태와 상태를 변경하는 함수를 쉽게 분리할 수 있다.

import React, { useState } from 'react';

function Counter() {
  // useState 훅 사용
  const [count, setCount] = useState(0);

  function increment() {
    // 상태 변경 함수 사용
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;

• useState(0)는 초기 상태 값 0을 받아 count와 setCount를 반환한다. 
• count는 현재 상태 값을 저장하는 변수이다.
• setCount는 상태 값을 변경하는 함수이다. 
• 버튼을 클릭할 경우 setCount함수가 실행되고 이때 count의 숫자가 1씩 상승하게 된다.

 

| 배열 디스트럭처링의 장점

• 가독성 : 배열 디스트럭처링을 사용하면 코드가 더 깔끔하고 가독성이 좋아진다.
• 편의성 : 배열의 특정 요소를 쉽게 변수에 할달할 수 있다. 특히 리액트 훅을 사용할 때 상태 변수와 상태 변경 함수를 명확하게 분리할 수 있다.