React에서 {}(중괄호)의 의미

TL; DR(요약)

{}(중괄호)는 자바스크립트 식을 의미한다.
즉, jsx/tsx 파일 내에서 js 식을 사용하고 싶으면 {} 안에 작성하면 된다.
✅ 코드 중간에 js 식을 넣고 싶을 때는 (백틱)${}(백틱)을 사용한다.

{}는 자바스크립트 식이다

1. 왜 자바스크립트 식이 필요할까?

• 일반적으로 React 파일은 jsx(js 사용 시), tsx(ts 사용 시) 이다.

JSX란?

• 자바스크립트 파일 내에서 HTML같은 마크업을 작성할 수 있게 해주는 syntax extension이다.
  (참고: jsx 관련 React 공식문서)

• jsx/tsx 파일은 html element를 return하는 하나의 함수로 이루어진다.

• 따라서 이 html element 안에서 js 변수나 식을 사용하기 위해서는 js 식임을 표현하는 {} 로 감싸줘야 한다.

• 렌더링할 때 {} 내부에 있는 식을 평가(필요 시 연산도 진행)한다

예시 코드

• 리액트 코드는 보통 다음과 같은 형식으로 작성된다(아래 코드는 tsx 파일이다)
• 아래 코드의 목표는 for loop를 활용해 여러 개의 이미지를 렌더링하는 것이다.
  ➡️ 그러려면 .map 함수(js method)를 사용해야 하기에 {} 로 감싸서 사용했다.

${}

• 아래 코드에도 있듯이 ${} 를 사용할 때도 있다.
  - className={col-${12/imgRow.length}}
• 마크업 코드(html 코드)를 작성하는 중간에 js 식이 필요하다면 이 syntax를 사용해야 한다.

function CardSkill({title, imgLs}: cardSkill) {
    return (
        <div className="mt-4">
            <p className="ps-2 fs-5">{title}</p>
            <div className="container rounded bg-blue p-3">
                {imgLs && (
                    imgLs.map(imgRow => (
                        <div className="row justify-content-center">
                            {imgRow.map(imgStr => (
                                <div className={`col-${12/imgRow.length} text-center`}>
                                    <img src={imgStr} alt="logo" className="w-50 my-1"/>
                                </div>
                            ))}
                        </div>
                    ))
                )}
            </div>
        </div>
    )
}

export default CardSkill