React.js JSX 이해하기: 자바스크립트와 HTML의 만남

작성일 : 2024-07-29

React.js JSX 이해하기: 자바스크립트와 HTML의 만남

JSX란 무엇인가?

JSX는 JavaScript XML의 약자로, React에서 사용되는 구문 확장을 뜻합니다. 이를 통해 자바스크립트 내에서 HTML과 유사한 문법을 사용할 수 있어, 더욱 직관적인 UI 컴포넌트를 설계할 수 있게 됩니다. JSX는 브라우저가 직접 이해할 수 없기 때문에 Babel과 같은 트랜스파일러를 사용하여 일반 자바스크립트로 변환됩니다. 일반적으로 React 종속 프로젝트에서 이러한 과정은 자동으로 처리되므로, 개발자는 JSX를 편리하게 사용할 수 있습니다.

JSX의 이점

JSX는 여러 가지 이점을 제공합니다:

가독성 향상: HTML의 구조를 그대로 자바스크립트 안에서 정의할 수 있어 코드의 가독성이 향상됩니다.
타입 안전성: JSX 구문에서 자바스크립트를 사용하기 때문에 변수와 함수에 대한 타입 검사가 이루어질 수 있습니다.
풍부한 기능: 자바스크립트의 모든 기능을 사용할 수 있어, 복잡한 UI 로직을 쉽게 구현할 수 있습니다.

JSX 문법 이해하기

JSX는 HTML과 매우 유사하지만, 몇 가지 중요한 차이점이 있습니다. 다음은 JSX를 사용할 때 알아야 할 주요 문법 요소들입니다:

기본 사용법

기본적으로 JSX는 HTML과 같은 태그 사용법을 따릅니다. 하지만 모든 JSX 코드는 단일 반환값으로 그룹화되어야 합니다. 이를 위해 일반적으로 여는 <div>와 닫는 </div>를 사용합니다.


jsx
const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>This is a JSX example.</p>
  </div>
);

이 예제에서는 element라는 변수에 JSX 코드를 할당하고 있습니다. 해당 코드는 후에 렌더링 되어 화면에 표시됩니다.

자바스크립트 표현식

JSX 내에서는 중괄호 {}를 사용하여 자바스크립트 표현식을 삽입할 수 있습니다. 예를 들어, 변수나 함수 호출 결과를 JSX에 포함할 수 있습니다.


jsx
const user = {
  firstName: 'John',
  lastName: 'Doe'
};

const element = (
  <h1>
    Hello, {user.firstName} {user.lastName}!
  </h1>
);

여기서 {user.firstName} {user.lastName}은 user 객체의 속성을 사용하여 완전한 인사말을 구성합니다.

JSX 속성

JSX에서는 HTML 속성과 매우 유사하게 속성을 정의할 수 있습니다. 중요한 차이점 중 하나는 class 대신 className을 사용해야 한다는 것입니다.


jsx
const element = <div className="container">Styled Div</div>;

또한, 속성 값으로 자바스크립트 표현식을 사용할 수 있습니다.


jsx
const element = <img src={user.avatarUrl} alt="User Avatar" />;

자식 요소

JSX 태그는 HTML 태그처럼 자식 요소를 가질 수 있습니다. 자식 요소는 <div>, <span>, 또는 다른 커스텀 컴포넌트가 될 수 있습니다.


jsx
const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you.</h2>
  </div>
);

조건부 렌더링

JSX 내에서 if 문이나 삼항 연산자를 사용하여 조건부 렌더링을 할 수 있습니다.


jsx
const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? (
      <h1>Welcome back!</h1>
    ) : (
      <h1>Please sign up.</h1>
    )}
  </div>
);

JSX와 컴포넌트

React의 강력한 기능 중 하나는 컴포넌트를 통해 UI를 모듈화하고 재사용할 수 있다는 점입니다. 컴포넌트는 함수 혹은 클래스 형태로 정의될 수 있으며, 이 컴포넌트들은 JSX를 반환합니다.

함수형 컴포넌트

함수형 컴포넌트는 간단히 자바스크립트 함수로 정의되며, return 문을 통해 JSX를 반환합니다.


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

이 컴포넌트는 name이라는 속성을 받아 그 값을 출력합니다.

클래스형 컴포넌트

클래스형 컴포넌트는 ES6의 클래스를 사용하여 정의됩니다. 클래스 내에는 반드시 render 메서드가 있어야 하며, 이 메서드는 JSX를 반환합니다.


jsx
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

클래스형 컴포넌트는 상태(state)와 생명주기 메서드를 가질 수 있어, 보다 복잡한 로직을 필요로 하는 상황에서 유용합니다.

결론

JSX는 React의 핵심 개념 중 하나로, 자바스크립트와 HTML을 통합하여 보다 직관적이고 효율적으로 사용자 인터페이스를 설계할 수 있게 합니다. JSX를 이해하고 활용하는 것은 React 개발에 있어 매우 중요한 첫걸음입니다. 이제 JSX를 이용해 다양한 실습을 통해 익숙해지는 것이 좋습니다.