[Frontend] 배열 구조 분해 할당 (Array Destructuring)

목차 (OPEN)

• ✨ 들어가며
• 🎯 const [a, b] = useState ( ... )
• 🧩 useState란
• ✨ 예제
• 🤔 배열 구조 분해를 사용하는 이유
• 💡 배열 구조 분해 할당 정리
• 🌟 마무리 정리

 

 

 

✨ 들어가며

이전 포스팅에서 const 라는 키워드에 대해서 알아보았는데,

보통 프론트엔드 코드를 짜다 보면 const [..., ...] 형태를 더 자주 보게 된다.

 

얘를 배열 구조 분해 할당 (Array Destructuring) 이라고 부른다는데,

특히 useState 랑 함께 사용할 때 위의 구조가 자주 보이는 것 같다.

 

그러나 프론트엔드를 처음 공부하기 시작한 내 입장에서는

뭐가 뭔지 모르겠기 때문에 이번 포스팅에서 하나씩 정리해보고자 한다.

 

 

---

🎯 const [a, b] = useState ( ... )

보통 React에서는 상태를 관리할 때 useState를 아래와 같이 사용한다.

const [count, setCount] = useState(0);

 

이번 포스팅에서는 이거를 하나씩 뜯어서 알아보고자 한다. 🔍

 

 

---

🧩 useState란

useState는 React 컴포넌트 안에서 상태를 만들 수 있게 해주는 함수이다.

 

const [state, setState] = useState(initialValue);

• state 👉🏻 현재 상태 값 (읽기 전용)
• setState 👉🏻 상태를 바꿔주는 함수 (값을 바꾸고, 화면도 다시 그려줌)

 

 

---

✨ 예제

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <div>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

• const [count, setCount] 👉🏻 배열 구조 분해 할당
• useState(0) 👉🏻 count의 초기 값은 0
• count 👉🏻 현재 숫자 상태값
• setCount 👉🏻 숫자 상태를 바꿔주는 함수 (setCount(3) 하면 count는 3이 됨)

 

 

---

🤔 배열 구조 분해를 사용하는 이유

배열 구조 분해를 사용해야 하는 이유는

useState 함수가 배열을 반환하기 때문이다

 

const result = useState(0); 
console.log(result); 
// 👉 [0, ƒ] => [현재 값, 업데이트 함수]

 

따라서 아래와 같이 사용하는 것이다.

const [value, setValue] = useState(0);

 

위의 코드가 바로 배열 구조 분해 할당이라는 문법인데,

첫 번째 값은 현재 상태,

두 번째 값은 그 상태를 바꾸는 함수로 나누어서 쓰는 것이다.

 

 

---

💡 배열 구조 분해 할당 정리

const [a, b] = [1, 2];
// a = 1
// b = 2

const [name, age] = ['소연', '24'];
// name = "소연"
// age = 24

 

마지막으로 한 번 더 정리하자면,

위의 예시 코드와 같이 배열을 여러 변수로 분해해서 쓸 수 있는 것이 배열 구조 분해 할당이다.

 

 

---

🌟 마무리 정리

문법	설명
const [x, y] = [1, 2]	배열 구조 분해 할당
const [state, setState] = useState(initialValue)	상태 값과 변경 함수를 동시에 받는 방법
useState는 배열을 리턴함	[현재 값, 현재 값을 바꿔주는 함수] 형태