출처: https://www.youtube.com/watch?v=eHOrUQdEh74&t=684s

중괄호 {}

중괄호{}를 사용하면 코드에서 일부 변수를 삽입하여 사용자에게 표시할 수 있도록 자바스크립트로 "escape back"할 수 있습니다.

예시 1

import { useState } from 'react';


function LikeButton() {
  const[liked, setLiked] = useState(false)
  const hi = 'CLICK ME';

  if(liked) return 'YOU LIKED THIS'

  return (
    <button onClick={()=>setLiked(true)}>{hi + '!'}</button>
  );
}

export default LikeButton;

{hi + '!'} 자바스크립트를 사용하는 것처럼 작동합니다!

예시 2

style 부분이 중괄호가 두번되어있다.

export default function Profile() {
  return (
    <>
      ...
      <img
       ...
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}
        

이는 style 변수를 객체로 미리 선언한 후 중괄호에 style만 넣어도 똑같이 작동한다.

export default function Profile() {
	 const style = {
         width: user.imageSize,
         height: user.imageSize
       }
 
       return (
         <>
           ...
           <img
            ...
             style={style}
           />
         </>
       );
}

조건부 렌더링 봐야함