React와 JSX

JSX란?

JSX(JavaScript XML)는 자바스크립트 문법 확장이다. 일반적인 JavaScript 코드 안에서 HTML-like 코드를 작성할 수 있도록 해준다. *.tsx 파일에서 TypeScript와 함께 사용하는 경우도 많다.

사용 목적

• UI를 직관적으로 설계할 수 있다. 선언적인 뷰 작성이 가능하다.
• 불필요한 DOM 설정을 줄일 수 있다. 예전처럼 document.createElement 같은 코드 없이도 뷰를 만들 수 있다.

---

JSX의 기본 문법 규칙

1. 단일 루트 노드 반환

하나의 컴포넌트는 단 하나의 루트 노드만 반환해야 한다. 여러 요소를 반환해야 하는 경우, <></>처럼 빈 Fragment를 사용해서 감싸야 한다.

return (
  <>
    <div>1</div>
    <div>2</div>
  </>
)

2. 태그는 반드시 닫아야 한다

HTML에서는 img, input 등의 태그를 닫지 않아도 에러가 발생하지 않지만, JSX에서는 반드시 닫아야 한다.

<img src="" alt="" />
<input type="text" />

3. 대소문자 구분

• 소문자 시작 태그는 HTML 요소로 인식된다.
• 대문자로 시작하는 태그는 사용자 정의 컴포넌트로 인식된다.

<div></div>           // HTML 요소
<MyComponent />       // React 컴포넌트

4. 속성 이름은 camelCase 사용

JSX에서는 HTML 속성을 그대로 사용하지 않고 대부분 camelCase로 작성한다.

• class → className
• for → htmlFor
• onclick → onClick

<div className="container" onClick={handleClick}></div>

---

JSX 내에서 자바스크립트 값 사용하기

JSX 내부에서 JS 표현식을 사용할 때는 중괄호 {}로 감싼다. 일반적으로 다음 두 경우에 사용한다.

1. 태그 내부에 직접 값 출력
2. 속성 값으로 표현식 전달

const welcome = "환영합니다.";
const name = "bergerac";

<p>{welcome}</p>
<p>{`안녕하세요 ${name}님`}</p>

---

JSX에서 이벤트 처리

JSX에서 이벤트를 설정할 때도 중괄호 {}를 사용하며, 직접 함수가 실행되지 않도록 콜백 함수 형태로 전달한다.

<button onClick={() => handleClick('클릭')}>클릭해주세요.</button>

---

스타일 적용 방법

스타일은 객체 형태로 지정한다. CSS 속성명은 camelCase로 바꿔야 하며, 값은 문자열로 전달해야 한다.

const style = {
  backgroundColor: 'orange',
  color: 'white',
  padding: '10px'
}

<div style={style}>Styled Div</div>

---

실전 예제: 아기고양이 컴포넌트 만들기

아래 예제는 고양이 사진을 출력하는 E_JSX 컴포넌트다. JSX 문법과 객체 활용을 함께 연습할 수 있다.

const cat = {
  catUrl: 'https://cdn.pixabay.com/photo/',
  description: '2014/11/30/14/11/',
  imageId: 'cat-551554_640.jpg',
  name: '아기고양이',
  imageTheme: {
    width: '200px',
    height: '150px'
  },
  theme: {
    backgroundColor: 'black',
    color: 'white'
  }
}

이 데이터를 활용하여 UI를 다음과 같이 구성했다:

• 루트는 빈 Fragment(<></>)로 구성
• <div>는 theme 스타일 적용
• <p>는 고양이 이름 출력
• <img>는 catUrl, description, imageId를 조합하여 src 구성

<>
  <div style={cat.theme}>
    <p>{cat.name}'s Picture</p>
    <img 
      src={cat.catUrl + cat.description + cat.imageId} 
      alt={cat.name}
      width={cat.imageTheme.width}
      height={cat.imageTheme.height}
    />
  </div>
</>