3. React의 기본 개념 - 1

JSX (JavaScript XML) 소개와 활용

JSX는 JavaScript XML의 약자로, React에서 UI를 작성하기 위한 확장된 JavaScript 문법입니다. JSX를 사용하면 JavaScript 코드 안에 마크업을 쉽게 작성할 수 있어서 가독성이 높고 유지보수가 용이합니다. 이제 JSX의 소개와 활용에 대해 알아보겠습니다.

JSX의 소개

JSX는 React에서 UI를 작성하기 위해 사용되는 문법으로, JavaScript의 확장된 형태입니다. JSX를 사용하면 HTML과 유사한 문법으로 UI 컴포넌트를 작성할 수 있습니다. JSX 코드는 Babel과 같은 트랜스파일러를 통해 일반 JavaScript 코드로 변환되어 브라우저에서 실행됩니다.

JSX의 활용

1. UI 컴포넌트 작성: JSX를 사용하여 React 컴포넌트를 작성할 때 HTML과 유사한 문법으로 UI를 표현할 수 있습니다. 이는 코드의 가독성을 높이고 작업 생산성을 향상시킵니다.
2. 동적 데이터 표현: JSX 내에서 중괄호 {}를 사용하여 JavaScript 표현식을 삽입할 수 있습니다. 이를 통해 동적으로 데이터를 UI에 표시할 수 있습니다.
3. 이벤트 처리: JSX에서는 이벤트 처리를 위해 onClick, onChange와 같은 이벤트 핸들러를 직접적으로 작성할 수 있습니다. 이를 통해 사용자의 상호작용에 따라 UI를 업데이트할 수 있습니다.
4. 조건부 렌더링: JSX 내에서 삼항 연산자나 논리 연산자를 사용하여 조건부 렌더링을 구현할 수 있습니다. 이를 통해 특정 조건에 따라 다른 UI를 렌더링할 수 있습니다.

예제 코드

// JSX를 활용한 간단한 컴포넌트 예제
import React from 'react';

const Hello = ({ name }) => {
  return <div>Hello, {name}!</div>;
};

export default Hello;

위의 코드는 JSX를 사용하여 name prop을 받아 화면에 "Hello, {name}!"을 출력하는 간단한 Hello 컴포넌트입니다. JSX를 사용하면 마치 HTML을 작성하듯이 간편하게 UI를 구성할 수 있습니다.