2.4.4 JSX 안에서 자바스크립트 표현식을 보여줄 땐 중괄호로 감싸기

앞에서 Greeting 컴포넌트에서 Props를 다룰 때 이 문법에 대해 이미 알아봤습니다. Props를 JSX에서 보여주기 위해 다음과 같이 중괄호로 감싸줬어요.

<Text>안녕하세요 {props.name}!</Text>

이렇게 여는 태그와 닫는 태그 사이에 자바스크립트 표현식을 사용할 때 중괄호를 사용합니다. 추가로 컴포넌트의 Props를 설정할 때도 자바스크립트 표현식을 사용해야 한다면 중괄호를 사용해야 합니다.

예를 들어, App 컴포넌트에서 Greeting 컴포넌트에 name 값을 넣어줄 때 텍스트를 직접 넣는 게 아니라 특정 자바스크립트 표현식을 넣어야 할 경우 어떻게 해야 하는지 알아봅시다.

App 컴포넌트를 다음과 같이 수정해보세요.

App.js

import React from 'react';
import {SafeAreaView} from 'react-native';
import Greeting from './components/Greeting';

const App = () => {
  const name = 'JSX';
  return (
    <SafeAreaView>
      <Greeting name={name} />
    </SafeAreaView>
  );
};

export default App;