[React] JSX란 무엇인가?

 JSX는 리액트의 핵심 구성 요소 중 하나로, 자바스크립트와 UI를 결합하여 직관적이고 유연하게 UI를 작성할 수 있게 도와줍니다. JSX는 단순히 HTML을 자바스크립트 코드에 넣는 것처럼 보이지만, 실제로는 다양한 기능과 규칙이 내포되어 있습니다.

 

1. JSX는 자바스크립트 표현

 

JSX는 자바스크립트의 확장 문법으로, UI의 구성을 선언적으로 정의할 수 있게 해줍니다. JSX는 브라우저가 이해할 수 없는 문법이므로, Babel 같은 컴파일러를 통해 일반적인 자바스크립트 코드로 변환됩니다. JSX 코드를 React.createElement 함수를 사용한 자바스크립트 함수 호출로 변환하게 됩니다.

 

JSX 코드 예시:

const element = <h1>Hello, world!</h1>;

위 JSX 코드는 실제로 아래와 같은 자바스크립트 코드로 변환됩니다:

const element = React.createElement('h1', null, 'Hello, world!');

변환된 코드에서 React.createElement 함수는 첫 번째 인수로 태그 이름(예: 'h1'), 두 번째 인수로 속성 객체(없으면 null), 세 번째 인수로 자식 요소(텍스트 ‘Hello, world!’)를 받습니다. 이는 JSX가 HTML의 문법처럼 보이지만, 실제로는 자바스크립트 함수 호출로 변환된다는 것을 의미합니다.

 

2. JSX 안에서 JavaScript 표현식 사용

 

JSX는 중괄호 {}를 사용하여 자바스크립트 표현식을 삽입할 수 있습니다. 이는 변수, 함수 호출, 연산식 등을 UI 코드에 쉽게 통합할 수 있음을 의미합니다.

 

예시:

const name = 'VULIN';
const element = <h1>Hello, {name}!</h1>;

• 이 코드는 name 변수의 값을 h1 요소 안에 삽입합니다. 결과적으로 <h1>Hello, VULIN!</h1>이 렌더링됩니다.

• 표현식에는 숫자 연산, 조건문, 함수 호출도 포함될 수 있습니다:

const count = 5;
const element = <p>현재 카운트는 {count + 1}입니다.</p>;

 

 

3. JSX는 객체를 표현

 

JSX 코드는 사실 객체를 표현합니다. React에서 JSX는 단순히 시각적 요소를 작성하는 방식이 아니라, 그 요소들을 객체로 표현하여 리액트가 이를 조작할 수 있게 해줍니다. React는 이 객체를 사용하여 DOM 업데이트를 관리합니다.

 

예시:

const element = <h1 className="greeting">Hello, world!</h1>;

이 코드는 다음과 같은 객체를 생성합니다:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

4. JSX의 태그 규칙

 

JSX를 사용할 때는 몇 가지 규칙을 따릅니다. 이는 기본 HTML 문법과 유사하지만, 자바스크립트와 결합되어 있기 때문에 몇 가지 차이가 있습니다.

 

• 단일 루트 엘리먼트: JSX에서 반환하는 JSX 구조는 반드시 하나의 최상위 요소로 감싸야 합니다.

return (
  <div>
    <h1>Title</h1>
    <p>Description</p>
  </div>
);

만약 최상위 요소가 여러 개라면, React.Fragment 또는 빈 태그(<>...</>)로 감싸줘야 합니다:

return (
  <>
    <h1>Title</h1>
    <p>Description</p>
  </>
);

 

• 태그 닫기: 모든 태그는 반드시 닫아야 합니다. HTML에서 셀프 클로징이 가능한 태그라도 JSX에서는 반드시 닫아야 합니다.

<img src="image.jpg" />
<input type="text" />

 

• HTML 속성의 차이점: JSX에서는 일부 HTML 속성명이 자바스크립트의 예약어와 충돌할 수 있기 때문에 다른 이름으로 사용됩니다. 예를 들어, class는 className으로, for는 htmlFor로 사용됩니다.

<label htmlFor="input">Enter Name</label>
<input className="input" type="text" />

 

 

5. JSX에서 조건부 렌더링

 

JSX에서는 조건부 렌더링을 쉽게 구현할 수 있습니다. 자바스크립트의 삼항 연산자나 논리 연산자를 사용하여 조건에 따라 요소를 렌더링할 수 있습니다.

 

삼항 연산자 사용:

const isLoggedIn = true;
return (
  <div>
    {isLoggedIn ? <h1>Welcome, User!</h1> : <h1>Please log in.</h1>}
  </div>
);

논리 연산자 사용:

const hasMessages = true;
return (
  <div>
    {hasMessages && <p>You have new messages!</p>}
  </div>
);

 

6. JSX에서 반복 렌더링

 

JSX에서 배열의 데이터를 반복하여 UI 요소로 렌더링할 때는 자바스크립트의 map 함수를 많이 사용합니다.

(JSX에서는 {} 안에 자바스크립트 코드를 넣을 수 있지만, 문(statements, 예: if 문이나 for 문)은 사용할 수 없습니다)

 

예시:

const items = ['Apple', 'Banana', 'Cherry'];
return (
  <ul>
    {items.map(item => <li key={item}>{item}</li>)}
  </ul>
);

• key 속성은 리액트가 각 요소를 고유하게 구분할 수 있도록 필수적으로 포함해야 합니다. 이는 성능 최적화와 관련이 있으며, 리액트가 효율적으로 리스트를 관리할 수 있게 해줍니다.

 

7. JSX에서의 스타일링

 

JSX에서 CSS 스타일을 직접 적용할 때는 객체 형태로 인라인 스타일을 지정할 수 있습니다. 이때 CSS 속성명은 camelCase로 작성해야 합니다.

 

예시:

const style = {
  color: 'blue',
  backgroundColor: 'lightgray',
  padding: '10px'
};

return <h1 style={style}>Styled Header</h1>;

• CSS 클래스를 사용하는 경우는 className을 사용해야 하며, 외부 CSS 파일을 연결하여 사용할 수도 있습니다.

 

 

8. JSX와 TypeScript

 

TypeScript와 JSX를 함께 사용하는 경우, JSX는 TSX 확장자를 사용합니다. TSX는 JSX에 타입을 추가한 형태로, 컴포넌트의 props와 state 등에 타입을 명시할 수 있어 안전한 코드 작성이 가능합니다.

 

예시 (TypeScript):

type GreetingProps = {
  name: string;
};

const Greeting: React.FC<GreetingProps> = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

결론:

 

JSX는 리액트에서 HTML과 자바스크립트를 결합하여 UI를 작성하는 직관적인 방법을 제공합니다. 가상 DOM과 함께 작동하여 성능 최적화도 가능하고, 자바스크립트의 강력한 기능을 활용해 복잡한 UI도 쉽게 구현할 수 있게 해줍니다. JSX는 단순한 문법 이상의 역할을 하며, 자바스크립트와 리액트를 이해하는 데 필수적인 개념입니다.