이중괄호로 데이터를 보내는 이유

 

 

export function PersonProvider({ children }) {
  const [person, dispatch] = useReducer(personReducer, initialPerson);
  return (
    <PersonContext.Provider value={{ person, dispatch }}>
      {children}
    </PersonContext.Provider>
  );
}

 

context를 작성 중에 왜 value의 값은 이중괄호로 묶어 보낼까? 물론 primitive type의 데이터가 아니기 때문에 object형태로 만들어야 복합적인 데이터를 보낼 수 있기 떄문인데 이를 좀 명확하게 알면 좋잖아?

 

 

JavaScript와 React에서 { } 는 객체를 나타낸다. value={{ person, dispatch }} 에서 사용된 첫 번째 { }는 JSX 내에서 JS 표현식을 사용하겠다는 것을 나타내며, 두 번째는 { }는 실제 객체 리터럴을 나타낸다.

 

PersonContext.Provider 컴포넌트의 value 속성에 전달된 {{ person, dispatch }}는 실제로 객체를 생성하고 있다.

이 객체는 person 상태와 dispatch 함수를 포함하고 있으며, 이를 Context를 통해 하위 컴포넌트한다.

 

따라서, 첫 번째 { }는 JSX에서 JS를 사용하겠다는 선언이고, 두 번째 { }는 person과 dispatch를 포함한 객체를 생성하는 것이다.

 

간단히 말해서, JSX에서 JS 객체를 넘겨주기 위해 첫 번째 { }를 사용하고, 실체 객체를 만들기 위해 두 번째 { }를 사용하는 것이다. 이렇게 두 번 겹쳐서 사용하는 것은 JSX의 문법과 JS 객체의 표현 방식 때문이다.

 

"그렇다면 실제 객체를 만들기 위함이라는데 왜 객체로 만들어야 하나?" 🤔

 

객체로 만들어야 하는 이유는 React의 Context API를 사용하여 여러 값을 전달하기 위해서이다. Context를 통해 전달할 때, 단일 값만 전달하는 것이 아니라 여러 값을 전달해야 할 경우가 많다. 예를 들어, 상태(state)와 그 상태를 변경하는 함수(dispatch 함수)를 함께 전달해야 하는 경우가 그러하다.

 

객체를 만들어 전달할 경우 다음과 같은 이점이 있다.

 

1. 구조화된 데이터 전달 : 여러 값을 하나의 구조화된 형태로 묶어서 전달할 수 있어, 관리가 용이하다.

예를 들어, { pserson, dispatch }와 같이 상태와 함수를 한 객체 안에 넣어 전달함으로써, 받는 쪽에서도 이 구조를 알고 있으면 쉽게 사용할 수 있다.

 

2. 확장성 : 나중에 전달해야 할 값이 더 추가될 경우, 객체에  속성을 추가하기만 하면 된다. 이는 코드의 수정을 최소화하며 기능을 확장할 수 있는 유연함을 제공한다.

 

3. 명확성과 일관성 : 하나아ㅢ 값만 전달하는 것이 아니라 특정 로직이나 기능과 관련된 여러 값을 전달해야 할 때, 이들을 그룹화하여 객체로 만들면, 코드의 가독성이 높아지고, 어떤 값들이 함께 사용되는지 명확하게 표현된다.

 

---

 

따라서, 객체를 통해 여러 값을 전달하는 방식은 React에서 상태 관리 뿐만 아니라 다양한 정보를 효과적으로 관리하고 전달하는 데 있어 중요한 패턴 중 하나이다.