props에 {} 중괄호 사용하는 이유와 방법

중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다.

 

// 자식 컴포넌트 Greeting 정의
function Greeting(props) {
  return (
    <div>
      <h1>안녕하세요, {props.name}님!</h1>
      <p>당신의 나이는 {props.age}세입니다.</p>
      <p>{props.message}</p>
    </div>
  );
}

// 부모 컴포넌트에서 Greeting 사용
function App() {
  return (
    <div>
      <Greeting 
        name="홍길동"        // 문자열 props (중괄호 없이)
        age={30}            // 숫자 props (중괄호 사용)
        message="안녕하세요!" // 문자열 props (중괄호 없이)
      />
    </div>
  );
}

 

위와 같이 숫자에 중괄호를 안쓰면 문자열로 이해한다. 문자열 이외에 정수, 변수, 또는 다른 컴포넌트가 들어갈 경우에는 {} 중괄호로 감싸줘야 한다.

 

중괄호 없는 경우

<Greeting name="홍길동" /> // 정적 문자열

 

중괄호 있는 경우

const userName = "홍길동";
<Greeting name={userName} /> // 동적 변수

 

따라서 중괄호는 리액트 jsx에서 변수를 사용하거나 동적인 데이터를 처리할때 필수 적이다.