React에서 객체 전달을 위한 중괄호 사용법 이해하기

React JSX에서 UI 구성할 때, 객체 전달 시 중괄호를 겹쳐서 두 번 사용하게 된다.

 

 

1. 첫 번째 중괄호 `{}`

JSX에서 React 요소의 속성을 설정할 때, JavaScript 표현식을 사용하기 위한 중괄호이다.

return <div>{...}</div>; // 첫 번째 중괄호

 

 

2. 두 번째 중괄호 `{}`

첫 번째 중괄호 안에 JavaScript 객체를 정의할 때 두 번째 중괄호를 사용한다. 이 경우, 실제 객체의 속성-값 쌍을 정의하는 역할을 한다.

즉, 중괄호가 겹쳐서 `{{}}` 형태로 사용하게 된다.

const Main = () => {
  const user = {
    이름: "이정환",
    isLogin: false,
  };

  const userDetails = {
    age: 25,
    city: "서울",
  };

  // 객체를 JSX 요소에 전달할 때
  return (
    <div>
      <div>{user.이름}</div>
      <div>{ { age: userDetails.age, city: userDetails.city } }</div> {/* 중괄호 겹쳐쓰기 */}
    </div>
  );
};

 

16번째 줄에서 첫번째 중괄호는 JSX의 표현식을 나타내고, 두 번째 중괄호는 실제 객체를 정의하는 것이다.

 

 

3. 이해하기

• JSX에서 객체 전달: React의 JSX에서는 첫 번째 중괄호로 JavaScript 표현식을 사용하기 위해 쓰고, 두 번째 중괄호를 사용해 객체를 전달(정의)한다. 이 구조는 스타일 속성뿐만 아니라, 다양한 객체를 전달할 때도 동일하게 적용된다.