react] 배열구조분해와 객체구조분해의 차이점

📌 객체 구조 분해 할당

✅ const { gisMap, gisCore } = useGisContext();처럼 선언 순서가 달라도 전혀 문제가 없습니다.

---

🔍 이유: 객체 구조 분해 할당은 순서에 영향을 받지 않습니다

JavaScript (및 TypeScript)에서 객체 구조 분해 할당은 "이름으로 매칭"되므로, 변수 선언 순서는 중요하지 않습니다.

예제:

const obj = { a: 1, b: 2 };

// 순서 달라도 문제 없음
const { b, a } = obj;

console.log(a); // 1
console.log(b); // 2

---

🔧 맥락에 적용해 보면

// context 기본값 선언
export const GisContext = createContext({
  gisCore: null,
  gisMap: null,
  treeData: null,
  checkedLayerIds: null
});

// context 사용 hook
export const useGisContext = () => useContext(GisContext);

// 다른 파일에서 구조 분해
const { gisMap, gisCore } = useGisContext();

→ 여기서 useGisContext()가 반환한 객체는 { gisCore, gisMap, ... } 형태의 객체이므로,

• gisMap을 먼저 꺼내든
• gisCore를 먼저 꺼내든

둘 다 키 이름만 일치하면 문제 없이 동작합니다.

 

📌배열 구조 분해 할당

✅ const [, setCounter] = useCounterState(); 에서 순서는 반드시 지켜야 합니다.

---

🔍 이유: 배열 구조 분해는 순서에 의존

const [counter, setCounter] = useCounterState();

이처럼 useCounterState()가 배열을 반환하고 있다면, 구조 분해 할당 시 순서가 매우 중요합니다.

예를 들어:

const [a, b] = [1, 2];   // a === 1, b === 2
const [b, a] = [1, 2];   // b === 1, a === 2 (다름)

---

🔧 적용 사례

function Buttons() {
  const [, setCounter] = useCounterState();

여기서 useCounterState()는 다음과 같이 동작할 가능성이 높습니다:

function useCounterState() {
  const [counter, setCounter] = useState(0);
  return [counter, setCounter];
}

즉, 0번 인덱스 = counter, 1번 인덱스 = setCounter 이므로:

• const [, setCounter]는 1번 인덱스만 꺼내는 것 (정확함)
• 만약 순서를 바꾸면 setCounter에는 counter값이 들어가게 되어 오작동합니다.

---

✅ 요약

구조 분해 대상 순서 필요 여부

✅ 배열	❗ 순서 중요
✅ 객체	✅ 순서 무관 (이름 기준)