샘플 코드를 보면서 JSX문법 이해하기

JSX는 자바스크립트 코드에 HTML과 유사한 요소를 작성할 수 있게 해주는 자바스크립트용 구문 확장자이다. Facebook에서 React 출시와 함께 도입했으며, 이후 최신 프런트엔드 개발의 필수 요소가 되었다. 이 글에서는 JSX의 구문과 사용법을 자세히 살펴보고, 이를 통해 React 개발 프로세스를 간소화하는 데 어떻게 도움이 되는지 알아본다.

JSX 구문 이해하기

JSX 엘리먼트는 자바스크립트 코드에 HTML과 유사한 엘리먼트를 작성하는 방법이다. 재사용 가능한 UI 컴포넌트를 만드는 데 사용할 수 있으며, 코드를 더 쉽게 정리하고 유지 관리할 수 있다.

JSX 요소는 JavaScript 표현식으로 작성되며 구조가 HTML 요소와 유사하다.

const greeting = <h1>Hello, World!</h1>;

JSX 엘리먼트는 변수에 할당하거나 함수에 인수로 전달할 수 있으며 함수에서 반환할 수도 있다. JSX 요소의 구문은 몇 가지 주요 차이점을 제외하면 HTML과 매우 유사하다.

컴포넌트(Componets)와 소품(Props)

React의 핵심 기능 중 하나는 재사용 가능한 컴포넌트를 생성하는 기능이다. JSX를 사용하면 컴포넌트를 JSX 표현식을 반환하는 자바스크립트 함수로 정의할 수 있다. 다음은 React의 간단한 컴포넌트 예시이다.

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

이 예제에서 Hello 컴포넌트는 컴포넌트에 전달된 모든 프로퍼티가 포함된 객체인 props라는 단일 인수를 받습니다. 이 예제에서는 Hello 함수를 사용자 정의하는 데 사용되는 name이라는 단일 프로퍼티를 전달하고 있다.

JSX에 표현식 임베딩하기

JSX의 가장 강력한 기능 중 하나는 구문 내에 표현식을 임베드하는 기능이다. 이를 통해 전달한 데이터에 따라 컴포넌트를 동적으로 업데이트할 수 있다.

JSX의 표현식은 중괄호 {} 안에 작성된다. 다음은 JSX 요소에서 표현식을 사용하는 예시이다.

const name = 'world';
const greeting = <h1>Hello, {world}!</h1>;

이 예제에서는 {world} 값이 JSX 요소에 삽입된다.

결론

JSX는 React에서 재사용 가능한 컴포넌트를 만들기 위한 강력한 도구이다. 구문은 간단하면서도 유연하며, 깔끔하고 유지보수 가능한 코드를 쉽게 작성할 수 있다. 표현식을 내장하고 컴포넌트 간에 데이터를 전달할 수 있어 복잡하고 동적인 애플리케이션을 구축하는 데 훌륭한 도구이다.