[React] JSX로 UI 표현하기

리액트에서 UI를 만들 때 사용하는 JSX는, 얼핏 보면 HTML과 비슷하지만 자바스크립트와 섞여 있는 특별한 문법이다.

이 문법을 제대로 이해하면 더 깔끔하고 실수 없는 컴포넌트를 만들 수 있다.

 

✅ JSX에서 값 렌더링하기

JSX에서는 중괄호 {}를 이용해 자바스크립트 값을 태그 안에 넣을 수 있다.

const name = '댕주';

const Hello = () => <h1>안녕하세요, {name}입니다!</h1>;

• 이렇게 하면 name 변수에 들어있는 값이 화면에 그대로 렌더링된다.

1. 중괄호 안에는 표현식만 쓸 수 있다.

표현식 = 값을 생성하는 코드

✔️ 가능: 변수, 숫자 계산, 삼항 연산자 등
❌ 불가: if, for, while 같은 문장(statement)

{user.age > 20 ? '성인' : '미성년자'} // OK
{if (user.age > 20) '성인'}          // ❌ 오류

 

2. 숫자, 문자열, 배열은 직접 렌더링 가능

<h1>{100}</h1>         // 숫자
<p>{"문자열"}</p>      // 문자열
<ul>{['A', 'B', 'C']}</ul> // 배열 (단, map으로 풀어줘야 보기 좋음)

 

2-1. 객체는 직접 렌더링 할 수없음

const user = { name: 'Kim', age: 30 };

<p>{user}</p> // ❌ 
<p>{user.name}</p> // ✅ 점 표기법으로 접근

• JSX에서 객체 자체를 넣으면 제대로 렌더링되지 않기 때문에, 꼭 객체의 속성으로 접근해야 한다.

3. 모든 태그는 닫혀 있어야 한다

HTML에서는 <br>, <img>처럼 열기만 해도 되지만, JSX는 XML 기반이기 때문에 무조건 닫아야 한다.

<br />      // ✅
<img src="" /> // ✅

4. 최상위 태그는 하나만 있어야 한다

컴포넌트에서 반환하는 JSX는 하나의 태그로 감싸야 한다.

// ❌ 오류 발생
return (
  <h1>제목</h1>
  <p>내용</p>
);

// ✅ 감싸줘야 함
return (
  <div>
    <h1>제목</h1>
    <p>내용</p>
  </div>
);

// 또는 Fragment 사용
return (
  <>
    <h1>제목</h1>
    <p>내용</p>
  </>
);

 

✅ JSX에서 스타일 지정하기

JSX에서는 HTML처럼 style=""을 쓰지 않고, style 속성에 객체를 넘긴다

방법 1. 인라인 스타일 (JS 객체)

<div style={{
  backgroundColor: 'red',
  borderBottom: '5px solid blue'
}}>
  스타일 예시
</div>

 

• 속성 이름은 카멜케이스로 작성
• 값은 문자열로 넣어야 함
• 가독성이 떨어질 수 있어 간단한 경우에만 추천

 

방법 2. 외부 CSS 파일 사용

// Header.module.css
.title {
  font-size: 24px;
  color: blue;
}

// Header.jsx
import './Header.css';

const Header = () => (
  <h1 className="title">제목입니다</h1>
);

 

• JSX에서는 class 대신 반드시 className을 사용해야 한다.
• CSS 분리로 가독성 및 유지보수성 증가

✅ 요약

항목	설명
{}	자바스크립트 표현식만 가능(if, for 불가)
객체	점 표기법으로 접근
태그	반드시 닫혀야 함(br />, <img />)
구조	반환 시 최상위 태그 하나로 감싸야 함
스타일	인라인 객체 or 외부 CSS 파일 사용
class	JSX에서는 class -> className