리액트 { } 의 의미

컴포넌트를 통해 모달창 UI를 만들어보는 와중에 컴포넌트 조건식을 { } 로 감싸주어야 한다는 것을 알게 되었다. 왜 { } 로 꼭 감싸주어야할까? 라는 궁금증이 생겼고 리액트에서 { }가 정확히 어떤 의미인지를 알아야겠다는 생각이 들었다

일단 { } 를 이해하려면 리액트 문법인 JSX를 제대로 이해하고 있어야 한다.

JSX는 리액트 JSX 문법 정리 에서도 썼듯이 리액트에서 쓰이는 문법이고 바벨이 JSX를 컴파일링해서

자바스크립트 문법으로 바꾸어준다.

// JSX식 
<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

// 바벨이 컴파일링한 후
React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

위의 코드를 보면 JSX에서는 간단하게 값만 나타내지만, 자바스크립트에서는 createElement 메서드를 통해 키와 Value 값을 갖는 객체를 만들어주는 것을 볼 수있다.

<MyComponent foo={1 + 2 + 3 + 4} />

리액트 공식 문서에서는 자바스크립트 표현을 {} 안에 넣어서 JSX 안에서 prop으로 사용할 수 있다고 쓰여져 있다.

컴포넌트를 통해 모달창을 하나 만들고, 글제목을 클릭하면 모달창의 띄어지고 재클릭하면 모달창이 다시 사라지는

기능을 구현할때도 자바스크립트 문법인 삼항 연산자가 쓰였는데, 그때도 { } 로 감싸주었다.

let [모달, 모달변경] = useState(false);

<div className="list">
        <h4 onClick={() => {return 모달변경(!모달)}}>{글제목[2]}</h4>
        <p>2월 17일 발행</p>
</div>

{ 모달 == true ? <Modal/> : null }

여기서 { } 부분을 지워주면 작동이 되지 않는다.

- 결론

❗️ 자바스크립트로 표현되는 부분을 { }로 감싸줌으로써 리액트 안에서 사용할 수 있도록 하는 것이다 ❗️