배열의 구조분해

Q1.

const [totalPassenger, totalSurvived, totalDeath, survivalRate]=useMemo(()=>{},[]); 꼴도 Json 구조분해 같은 방식의 문법인가?

 

 

 

A1.

ChatGPT의 말:

 

네, const [totalPassenger, totalSurvived, totalDeath, survivalRate] = useMemo(() => {}, []); 형태는 JavaScript의 구조 분해 할당 (Destructuring Assignment) 문법을 활용한 것입니다. 하지만 여기서 조금 더 구체적으로 말하자면, 이는 배열 구조 분해를 사용한 예제입니다.

구조 분해 할당이란?

구조 분해 할당은 배열이나 객체에서 값을 꺼내 변수에 쉽게 할당할 수 있게 해주는 문법입니다.

---

예제 설명

const [totalPassenger, totalSurvived, totalDeath, survivalRate] = useMemo(() => {
    return [100, 50, 50, 50]; // 배열 반환
}, []);

1. useMemo의 반환값:
   • useMemo 훅의 계산 함수(() => {})는 배열 [100, 50, 50, 50]을 반환합니다.
   • 여기서 useMemo의 결과는 배열 형태로 반환되므로, 배열 구조 분해 문법으로 각 요소를 개별 변수에 할당합니다.
2. 구조 분해:
   • 배열의 첫 번째 요소(100)가 totalPassenger에,
   • 두 번째 요소(50)가 totalSurvived에,
   • 세 번째 요소(50)가 totalDeath에,
   • 네 번째 요소(50)가 survivalRate에 할당됩니다.

---

배열 구조 분해의 일반적인 형태

기본 예제

const numbers = [1, 2, 3];
const [a, b, c] = numbers;

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

기본값 설정

구조 분해 시 값이 없을 경우 기본값을 설정할 수 있습니다.

const numbers = [1];
const [a, b = 42] = numbers;

console.log(a); // 1
console.log(b); // 42 (기본값 사용)

---

useMemo와의 결합

React의 useMemo 훅과 결합하면 다음과 같은 방식으로 사용됩니다:

1. useMemo에서 계산된 값을 배열로 반환:
   • useMemo 훅은 배열 [value1, value2, ...]을 반환합니다.
   • 구조 분해 할당을 사용하여 해당 배열의 값을 개별 변수로 분리합니다.
2. 실제 예제:

const [totalPassenger, totalSurvived, totalDeath, survivalRate] = useMemo(() => {
    const totalPassenger = 100;
    const totalSurvived = 50;
    const totalDeath = totalPassenger - totalSurvived;
    const survivalRate = (totalSurvived / totalPassenger) * 100;

    return [totalPassenger, totalSurvived, totalDeath, survivalRate];
}, []);

• 계산 함수가 배열 [100, 50, 50, 50]을 반환합니다.
• 구조 분해 할당으로 각 값을 개별 변수에 저장합니다.

---

요약

• useMemo에서 배열을 반환하고 구조 분해 할당을 사용하는 것은 완전히 합법적이며, 자주 사용하는 패턴입니다.
• 이는 배열 구조 분해 문법을 활용한 예입니다.
• 객체에서도 유사한 방식으로 구조 분해 할당을 사용할 수 있지만, 배열의 경우 요소의 순서에 의존합니다.