구조분해할당 (Context 사용 예시)

이전에 JS 문법으로 구조분해할당을 배웠다.

[🍦] JS 문법 - Destructuring (구조 분해 할당) (클릭)

 

당시에는 단순한 예제로만 익혔는데 다양한 곳에서 많이 사용하고 있어서 점점 헷갈리던 와중에

Context -> RTK 를 진행하며 실제 사용 예시와 함께 추가로 정리해보고자 한다.

 

---

기본적으로 구조분해할당은 (객체나 배열에서) 많은 값들 중 내가 필요한 값만 뽑아야 할 때 사용한다.

 

 

📍객체 사용

객체 내의 key 값에 집중하기!

다양한 key : value pair가 있는 객체에서 필요한 값의 key와 동일하게 변수를 지정한다.

그 변수를 { } 내에 입력하여 "구조분해할당 입니다~" 라고 알려준다고 생각하면 쉽다 !

 

• 예제1: "멋진셔츠"는 '상품명'이라는 변수에, 10000은 '가격'이라는 변수에 넣기

const product = {
	상품명: "멋진셔츠",
	가격: 10000,  
    // 여기서 상품명, 가격은 key 값
}

const { 가격, 상품명 } = product;
// 여기서 가격, 상품명은 변수 !

객체를 구조분해할당 할 때는 key값을 중요하게 보기 때문에 변수 선언 순서는 상관없다.

 

 

• 예제2: Context 사용

// messageContext.jsx

import { createContext, useState } from "react";

export const MessageContext = createContext();

export const MessageProvider = ({ children }) => {
  const [message, setMessage] = useState("");
  return (
    <MessageContext.Provider value={{ message, setMessage }}> ⭐️value에 집중
      {children}
    </MessageContext.Provider>
  );
};


⭐️
value = {
	{ message: message, setMessage: setMessage }
};

위 예제에서 value만 따로 빼서 보면 사실 객체 형태이다.

객체의 key 값인 message와 setMessage를 변수로 만들어 상단처럼 구조분해할당을 해준 것이다.

 

 

🔥중요🔥 이렇게 구조분해할당으로 담아준 값은 다른 로직에서 context 활용할 수 있다.

// DeepNestedStructure.jsx

function MessageDisplay() {
  const { message } = useContext(MessageContext); ⭐️
  return (
    <MessageDisplayWrapper>
      <h3>메시지 표시 영역</h3>
      <p>{message || "아직 메시지가 없습니다..."}</p>⭐️⭐️
    </MessageDisplayWrapper>
  );
}


⭐️
1. useContext(MessageContext)는 messageContext의 value 값을 가져온 것.
=> const aa = { message: message, setMessage: setMessage }
=> const aa = { message, setMessage}   // key와 value값이 같으면 축약 가능
=> const { message } = useContext(MessageContext);  // message 값만 변수에 담기


⭐️⭐️
'변수' message에 담긴 값을 <P> 태그 내부에서 사용할 수 있다.

 

 

 

📍배열 사용

배열은 비교적 간단하다.

배열의 순서에 맞는 변수를 할당해주면 된다.

따라서 구조분해할당의 순서가 중요하다 !

const colors = ["red", "green", "blue"];

// 세 번째 값만 변수에 할당하기
const [, , thirdColor] = colors;
console.log(thirdColor); //blue 출력됨