[React] (리액트 공부하기 10) JSX 중괄호 { }

공부를 하다가 JSX에서 중괄호 { }를 사용할 때와 사용하지 않을 때의 차이가 궁금해서
알아보려고 한다!!!

---

1. 중괄호 {}를 사용하는 경우

• 문자열이 아닌 자바스크립트 표현식(변수, 함수 호출, 숫자, 논리 연산 등)을 JSX에서 사용하려면 중괄호 {}가 필요하다.
• JSX에서는 중괄호 내부의 코드를 자바스크립트로 평가한다.

사용 예시:

function App() {
  const name ="React";
  const viewCount = 1500;
  
  return (
    <div>
      <h1>이름: {name}</h1>
      <p>조회수: {viewCount}</p>
    </div>
  );
}

• {name}: 자바스크립트 변수 name의 값(React)이 렌더링 된다.
• {viewCount}: 숫자 데이터도 중괄호를 사용해야 한다.

주요 사례:

1. 변수 또는 상수:

const name ="React";
<h1>{name}</h1> // React

2. 숫자:

const count = 5;
<p>{count}</p> // 5

3. 함수 호출:

const getMessage = () => "Hello, World!";
<h2>{getMessage())</h2> // Hello, world!

4. 논리 연산:

const isLoggedIn = true;
<p>{isLoggedIn ? "Welcome!" : "Please log in."}</p> // Welcome!

5. 다른 컴포넌트를 props로 전달:

<Layout
  header={<Header title="Welcome!" />}
  footer={<Footer />}
/>

---

2. 중괄호 {}를 사용하지 않는 경우

• 단순 문자열을 JSX 속성(props)에 직접 전달할 때는 중괄호 없이 작성한다.
• 문자열은 중괄호 없이 " "(큰따옴표 또는 작은따옴표)로 감싼다.

function App() {
  return (
    <div>
      <h1 title="React Tutorial">안녕하세요!</h1>
    </div>
  );
}

• title="React Tutorial": 문자열"React Tutorial"을 title 속성에 전달

주요 사례:

1. 문자열:

<h1 title="Welcome">Hello</h1>

2. CSS 클래스 이름:

<div className="container"></div>

3. HTML 태그 속성 값이 문자열인 경우:

<img src="https://example.com/image.png" alt="Example Image" />

---

3. 중괄호와 큰따옴표의 차이점

1. 중괄호{}:

• 자바스크립트 표혀닉을 평가하고, 그 결과를 사용
• 숫자, 함수 호출, 변수 등은 반드시 중괄호를 사용한다.

2. 큰따옴표 " ":

• 문자열만 사용 가능
• 문자열은 중괄호를 사용할 필요가 없다.

---

4. 잘못된 사용 사례

1. 문자열을 중괄호 안에 사용:

<h1 title={"hello"}>안녕하세요!</h1>

• 가능하지만 비효율적이다. 그냥 title="Hello"로 작성해라.

2. 자바스크립트 표현식을 큰따옴표로 감싸기:

const name="React";
<h1 title="name"></h1> // "name"그대로 렌더링이 된다.

• title={name}로 수정해야 한다.