JSX 이해하기: JSX가 React에서 UI 코드 작성을 어떻게 쉽게 만드는지.

작성일 : 2024-06-23

JSX 이해하기

JSX가 무엇인가?

JSX는 JavaScript XML의 약자로, JavaScript 코드 내에서 XML과 유사한 구조를 사용할 수 있게 해주는 문법 확장입니다. React 개발자가 친숙한 HTML과 매우 비슷하게 UI를 구성할 수 있어 UI 컴포넌트를 정의하고 관리하는 일이 편리해집니다.

React를 처음 사용해본다면, JSX 문법이 조금 낯설게 느껴질 수 있습니다. 하지만 이를 이해하고 나면 상당히 강력하고 직관적인 도구임을 알 수 있습니다. 일반적인 HTML 구조와 매우 유사하므로 기본적인 구조는 쉽게 익힐 수 있습니다.

JSX를 사용하면 다음과 같은 장점이 있습니다:

가독성 향상: 보다 직관적으로 UI를 표현할 수 있어 코드의 가독성이 높아집니다.
유지보수 용이: 객체나 배열을 사용해 UI를 표현하는 것보다 JSX를 활용하면 유지보수가 더 쉬워집니다.
개발 속도 향상: 복잡한 코드 구조를 단순화하여 개발 속도를 높일 수 있습니다.

JSX 기본 규칙과 사용법

JSX는 기본적으로 JavaScript 코드 내에서 XML 태그를 사용하는 방식입니다. 이를 위해 JSX 구문은 대부분 HTML과 유사하지만, JavaScript의 유연성도 함께 가집니다. 다음은 기본적인 JSX 문법의 예입니다:


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

위 코드에서 <h1>Hello, world!</h1> 부분이 JSX 구문입니다. React 컴포넌트 내에서 사용되는 JSX는 브라우저에서 HTML로 변환됩니다.

JSX의 주요 특징

JavaScript 표현식 사용: JSX 내부에서는 중괄호 {}를 사용하여 JavaScript 표현식을 사용할 수 있습니다. 예를 들어 다음과 같습니다:


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

HTML 속성: JSX에서는 HTML 속성을 사용할 수 있으며, camelCase로 사용해야 합니다. 예를 들어 class 대신 className을 사용해야 합니다. 다음은 예입니다:


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

자식 요소: 여러 자식을 포함할 경우 괄호로 묶어서 표현할 수 있습니다. 다음은 예입니다:


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

React와 JSX의 통합

React 프로젝트에서 JSX를 사용하면 컴포넌트를 보다 효과적으로 작성할 수 있습니다. 컴포넌트는 단순히 함수이거나 클래스로, UI의 일부를 반환하는 역할을 합니다. JSX를 사용하여 React 컴포넌트를 정의하는 방법은 다음과 같습니다:

함수형 컴포넌트


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

함수형 컴포넌트는 간단히 반환하는 결과가 JSX인 함수입니다. 이 함수는 props 객체를 인자로 받아 UI를 구성하는 데 사용합니다.

클래스형 컴포넌트


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

클래스형 컴포넌트는 React.Component를 확장하여 정의되며, render 메서드는 JSX를 반환합니다. 클래스형 컴포넌트는 상태와 생명주기 메서드를 포함할 수 있습니다.

JSX의 한계와 주의사항

JSX는 매우 강력하지만, 몇 가지 주의사항도 있습니다:

JSX는 JavaScript: JSX는 JavaScript 코드로 변환되므로, 모든 유효한 JavaScript 코드가 지원됩니다. 그러나 JavaScript의 예약어는 JSX에서 사용할 수 없습니다. 예를 들어 class와 for는 사용할 수 없고, 대신 className과 htmlFor를 사용해야 합니다.
HTML 태그와 React 컴포넌트의 구분: HTML 태그는 소문자, React 컴포넌트는 대문자로 시작해야 합니다. 예를 들어, <div>는 HTML 태그, <MyComponent>는 React 컴포넌트입니다.
자체 닫는 태그: JSX에서는 input과 같은 태그는 반드시 자체 닫기를 해야 합니다. 예를 들어, <input />처럼 사용해야 합니다.


jsx
const element = <input type="text" />;

결론

JSX는 React에서 UI를 작성하는 매우 직관적이고 강력한 도구입니다. HTML과 유사한 문법을 통해 UI를 정의하고, JavaScript의 유연성을 더해 복잡한 UI 로직을 관리하기 쉽게 만듭니다. JSX의 기본 규칙과 사용법을 잘 이해하면 React 개발의 생산성과 유지보수성을 크게 향상시킬 수 있습니다. 이제 JSX를 활용하여 더욱 효율적이고 직관적인 React 컴포넌트를 작성해 보세요.