JSX? 그게 뭔데?

1. JSX의 정의

JSX는 JavaScript XML의 줄임말로, JavaScript 안에서 HTML 같은 문법을 사용할 수 있게 해주는 문법 확장입니다. JSX는 React 컴포넌트에서 UI를 정의하는데 매우 유용하며, 보다 직관적으로 UI 구조를 작성할 수 있습니다.

쉽게 말해, JSX는 JavaScript 코드를 작성하면서 HTML 태그를 넣을 수 있도록 도와주는 도구입니다. 이를 통해 HTML 요소들을 함수형 컴포넌트 내부에서 정의하고 조작할 수 있습니다.

 

JSX의 기본 문법:

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

위 코드는 JavaScript로 작성되어 있지만, HTML 요소를 포함하고 있는 것을 볼 수 있습니다. JSX를 사용하지 않으면 UI를 JavaScript 코드로 아래와 같이 표현해야 할 것입니다.

 

JSX 없이 UI를 표현:

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

위 코드는 React의 createElement 함수를 사용하여 <h1> 태그를 생성하는 방식입니다. JSX는 이 과정을 보다 간단하고 직관적으로 바꿔줍니다.

 

2. 왜 JSX를 사용하는가?

JSX를 사용하는 이유는 간단합니다. UI를 직관적이고 가독성 좋게 작성할 수 있기 때문입니다. 순수한 JavaScript로 UI를 작성하는 것보다 JSX를 사용하면 컴포넌트의 구조를 쉽게 이해할 수 있습니다.

JSX를 사용한 코드:

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

위의 코드에서, 우리는 <h1> 태그와 함께 JavaScript 표현식 {props.name}을 삽입했습니다. 이처럼 JSX는 HTML과 JavaScript를 자연스럽게 혼합할 수 있도록 해주어 코드를 더 직관적이고 간결하게 만들어 줍니다.

또한, JSX는 컴파일 과정에서 일반 JavaScript로 변환됩니다. 이는 JSX가 브라우저에 직접 실행되는 것이 아니라, React의 createElement 함수로 변환되어 성능에 큰 영향을 미치지 않는다는 점에서 안전하게 사용할 수 있습니다.

 

3. JSX의 기본 문법

JSX는 HTML과 비슷하게 생겼지만, 완전히 동일한 것은 아닙니다. JSX는 JavaScript이기 때문에 몇 가지 규칙을 따라야 합니다.

1. 닫는 태그 필수
JSX에서 모든 태그는 닫혀야 합니다. HTML에서는 <img> 같은 태그는 닫지 않아도 되지만, JSX에서는 <img />처럼 닫아주어야 합니다.

const image = <img src="image.png" />;

 

2. JavaScript 표현식 사용
JSX 내부에서는 {}를 사용하여 JavaScript 표현식을 넣을 수 있습니다. 이를 통해 동적인 값이나 변수를 JSX 안에 삽입할 수 있습니다.

const name = "John";
const greeting = <h1>Hello, {name}!</h1>;

3. class가 아닌 className
HTML에서는 요소의 클래스를 정의할 때 class 속성을 사용하지만, JSX에서는 className을 사용해야 합니다. class는 JavaScript의 예약어이기 때문에, 충돌을 피하기 위해 className이라는 이름을 사용합니다.

const element = <div className="container"></div>;

4. JSX와 JavaScript의 차이점

JSX는 XML의 문법을 기반으로 하고 있기 때문에, JavaScript와는 몇 가지 차이점이 존재합니다.

1. 대문자와 소문자 규칙
JSX에서 태그 이름이 대문자로 시작하면, React는 이를 컴포넌트로 인식합니다. 소문자로 시작하는 태그는 기본 HTML 요소로 간주됩니다.

// 대문자: 컴포넌트 
const element = <MyComponent />; 

// 소문자: HTML 요소 
const element2 = <div></div>;

2. 조건부 렌더링

JSX는 조건부 렌더링을 쉽게 구현할 수 있습니다. 삼항 연산자를 사용하여 조건에 따라 다른 UI를 표시할 수 있습니다.

const isLoggedIn = true; 
const element = isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;

 

5. JSX와 React 컴포넌트

React의 핵심 개념인 컴포넌트는 JSX를 통해 매우 쉽게 작성할 수 있습니다. 컴포넌트는 여러 UI 조각을 재사용 가능하게 만들어 주며, 이를 통해 큰 애플리케이션을 효율적으로 관리할 수 있습니다.

function UserGreeting(props) {
  return <h1>Welcome back, {props.name}!</h1>;
}

function GuestGreeting() {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting name={props.name} />;
  }
  return <GuestGreeting />;
}

위 예시에서 우리는 JSX를 사용하여 UserGreeting과 GuestGreeting 컴포넌트를 만들고, 조건에 따라 Greeting 컴포넌트에서 다른 컴포넌트를 렌더링하는 것을 볼 수 있습니다.

 

6. 결론

JSX는
1. React를 사용하는 데 있어 필수적인 도구이다.
2. JavaScript 안에서 HTML 요소들을 작성할 수 있게 해준다.
3. UI를 보다 직관적으로 작성하고 관리할 수 있게 해준다.
4. JSX를 통해 React 컴포넌트를 쉽게 작성할 수 있다.
5. 동적인 UI를 구현하는 과정을 간결하고 가독성 있게 만들 수 있다.