JSX 기초: JSX 문법과 React에서의 역할 이해하기

JavaScript는 웹 개발에서 매우 강력한 도구입니다. 그러나 복잡한 UI를 구축하려면 순수 JavaScript만으로는 생산성이 떨어질 수 있습니다. 이 때 등장하는 것이 JSX입니다. JSX(JavaScript XML)는 JavaScript를 확장한 문법으로, HTML 같은 문법을 JavaScript 코드 안에 직접 작성할 수 있게 해줍니다. 이는 React에서 아주 중요한 역할을 합니다. 이 글에서는 JSX의 기초 개념부터 문법, 그리고 React에서 어떻게 사용하는지 알아보겠습니다.

JSX란?

JSX는 JavaScript의 확장 문법으로, HTML 태그를 JavaScript 코드 안에서 직접 사용할 수 있게 해줍니다. 이는 코드의 가독성과 유지보수성을 크게 향상시킵니다. HTML과 비슷해 보이지만 몇 가지 중요한 차이점이 있습니다. 예를 들어, 기본 HTML 태그와 속성은 모두 소문자로 작성되지만, JSX에서는 대소문자를 구분합니다. 또한, JSX에서는 속성 이름이 캐멀 케이스(camelCase)를 따릅니다.

JSX의 기본 문법

JSX의 기본 문법은 매우 직관적입니다. 다음은 JSX의 간단한 예제입니다:

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

위의 코드는 React.createElement() 함수를 호출하는 코드로 변환됩니다. 즉, JSX는 최종적으로 JavaScript 객체로 변환됩니다.

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

표현식 사용

JSX 내부에서는 JavaScript 표현식을 사용할 수 있습니다. 이는 중괄호 {}로 감싸서 표현합니다.

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

이는 다음과 같이 변환됩니다:

javascript
const element = React.createElement('h1', null, `Hello, ${name}!`);

조건부 렌더링

JSX에서 조건부 렌더링을 구현하는 방법은 여러 가지가 있습니다. 가장 일반적인 방법은 삼항 연산자를 사용하는 것입니다.

javascript
const element = <h1>{loggedIn ? 'Welcome back!' : 'Sign up'}</h1>;

또한, && 연산자를 사용하여 null이나 false를 반환할 수 있습니다:

javascript
const element = <div>
  {messages.length > 0 && <h2>You have {messages.length} unread messages.</h2>}
</div>;

JSX와 React

JSX는 React와 함께 매우 강력하게 사용됩니다. React 컴포넌트를 작성할 때 JSX를 사용하면 코드가 더욱 직관적이고 읽기 쉬워집니다.

함수형 컴포넌트에서의 사용

함수형 컴포넌트는 단순히 함수로 정의된 컴포넌트를 말합니다. 이 함수는 JSX를 반환합니다.

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

클래스형 컴포넌트에서의 사용

클래스형 컴포넌트는 React.Component를 상속하여 정의됩니다. render 메서드에서 JSX를 반환합니다.

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

컴포넌트 합성

React에서는 작은 컴포넌트를 합성하여 더 큰 컴포넌트를 만들 수 있습니다. 이는 JSX를 통해 쉽게 구현할 수 있습니다.

javascript
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

JSX의 장점

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

• 가독성: HTML과 유사한 구조로 인해 코드를 이해하기 쉽습니다.
• 유지보수성: UI의 구조가 한 눈에 들어오기 때문에 유지보수가 용이합니다.
• 생산성: JavaScript와 HTML을 한 파일 내에서 작성할 수 있어 개발 속도가 빨라집니다.

결론

JSX는 React 개발에서 빼놓을 수 없는 중요한 도구입니다. 기본 문법과 특징을 이해하고 나면, React 컴포넌트를 더욱 효율적으로 작성할 수 있습니다. JSX의 장점을 최대한 활용하여 가독성 있고 유지보수하기 쉬운 코드를 작성해보세요.