React – JSX와 렌더링 – JSX 문법 – 1 – JSX에서 표현식과 중괄호 사용법

작성자 wooah
React – JSX와 렌더링 – JSX 문법 – 1 – JSX에서 표현식과 중괄호 사용법

React – JSX와 렌더링 – JSX 문법 – 1 – JSX에서 표현식과 중괄호 사용법

안녕하세요, React 배우는 여러분! 😊
이번 시간에는 JSX에서 중괄호 {}를 사용하는 법, 그리고 그 안에서 어떤 표현식들을 쓸 수 있는지 자세히 알려드릴게요.

중괄호는 JSX에서 마치 “마법의 포탈” 같은 역할을 해요.
HTML과 비슷해 보이는 JSX 안에서도 자유롭게 JavaScript 표현식을 넣을 수 있게 해주니까요!

1. JSX에서 중괄호는 왜 쓸까요?

우리가 JSX를 사용할 때는 정적인 HTML만으로는 부족해요.

예를 들어,

  • 사용자 이름을 넣고 싶다든지,
  • 조건에 따라 다른 텍스트를 보여주고 싶다든지,
  • 반복해서 여러 항목을 표시하고 싶다든지!

이럴 땐 JavaScript의 변수, 연산, 함수 호출 등을 중괄호 {} 안에 넣으면 해결돼요.

✅ 중괄호는 JSX 안에서 JavaScript 표현식을 삽입하는 유일한 방법입니다!

2. 변수 출력하기

가장 기본적인 사용 예시는 바로 변수 출력이에요.

const name = '홍길동';
const greeting = <h1>안녕하세요, {name}님!</h1>;

➡️ 브라우저 화면에는
“안녕하세요, 홍길동님!” 이라고 출력됩니다.

📌 JSX에서 {} 안에 변수명을 넣으면, 변수의 값이 그대로 문자열처럼 출력돼요.

3. 수식이나 계산식 넣기

단순 변수뿐만 아니라 계산식도 넣을 수 있어요.

const price = 1500;
const quantity = 3;
const total = <p>총합: {price * quantity}원</p>;

➡️ 결과: 총합: 4500원

4. 함수 호출도 가능해요!

JSX 중괄호 안에서는 함수 호출 결과도 표현할 수 있어요.

function getGreeting(name) {
  return `${name}님, 환영합니다!`;
}

const element = <p>{getGreeting('영희')}</p>;

➡️ 결과: 영희님, 환영합니다!

🎯 단, JSX 안에서 함수가 호출될 뿐이므로 함수 내부에서 side effect가 생기지 않도록 주의해야 해요!

5. 삼항 연산자 사용하기 (조건에 따라 다르게 표현)

JSX에서는 if문을 직접 쓸 수는 없지만, 삼항 연산자를 활용해 조건 분기를 할 수 있어요.

const isLoggedIn = true;

const element = (
  <div>
    {isLoggedIn ? <p>로그인 완료</p> : <p>로그인이 필요합니다</p>}
  </div>
);

➡️ 결과: 로그인 완료

✅ if-else 대신 삼항 연산자를 활용하는 것이 JSX의 조건 표현 기본 방식입니다!

6. AND 연산자(&&)로 조건 표현

특정 조건이 참일 때만 보여주고 싶다면 && 연산자를 사용할 수 있어요.

const hasNewMessage = true;

const element = (
  <div>
    <h1>안녕하세요!</h1>
    {hasNewMessage && <p>📩 새로운 메시지가 도착했어요!</p>}
  </div>
);

➡️ hasNewMessage가 true일 때만 <p>가 표시돼요.

7. 배열과 반복 표현

중괄호 안에서 배열을 map() 함수로 순회하면서 여러 요소를 생성할 수도 있어요.

const fruits = ['🍎', '🍌', '🍇'];

const element = (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

➡️ 결과:

  • 🍎
  • 🍌
  • 🍇

🎯 key 속성은 리액트가 리스트 항목을 구분하는 데 필요하므로 꼭 넣어주세요!

8. 객체는 직접 출력할 수 없어요 ❌

const user = { name: '민수', age: 28 };

// 아래 코드는 오류 발생!
const element = <p>{user}</p>;

➡️ 객체는 직접 출력할 수 없고, 속성 단위로 꺼내서 표현해야 해요.

const element = <p>{user.name} / {user.age}세</p>;

9. undefined, null, boolean 값은 출력되지 않음

이건 React의 특징 중 하나예요.

const value = undefined;
const element = <p>{value}</p>; // 아무 것도 렌더링되지 않음
  • true, false, null, undefined는 화면에 아무것도 출력하지 않아요.
  • 조건문처럼 활용되기도 해요!

10. 중첩 JSX 표현식도 가능

const isLoggedIn = true;
const userName = '지은';

const element = (
  <div>
    {isLoggedIn ? (
      <h2>{userName}님, 환영합니다!</h2>
    ) : (
      <h2>로그인이 필요합니다.</h2>
    )}
  </div>
);

🎉 JSX 안에서 또 다른 JSX를 조건에 따라 선택적으로 렌더링할 수 있어요!

주의할 점 요약

항목 주의사항
{}는 표현식만 가능 변수, 계산, 함수 호출 등 가능하지만, if, for는 불가능
조건 표현은 ? :, &&로 JSX 내부에 if문 쓰면 오류 발생
객체는 출력 불가 {user} 대신 {user.name} 등으로 속성 추출
null, undefined, false는 출력 안 됨 렌더링 되지 않지만 조건문으로는 활용 가능
리스트 렌더링 시 key 필수 고유한 key 없으면 경고 발생

마무리하며

JSX에서 중괄호 {}는 단순한 표현이 아니라, React의 동적 UI를 만들어내는 핵심 도구예요.
덕분에 HTML처럼 보이지만, JavaScript의 힘을 그대로 활용할 수 있게 되었죠!

이제 여러분은 JSX 안에서 자유자재로 조건 처리하고, 변수를 사용하고, 반복도 할 수 있게 되었어요! 🙌

다음 글에서는 JSX에서 조건문과 반복문을 더 깊이 있게 살펴볼게요. 함께 계속 성장해요! 💪🚀

답글 남기기