[React] JSX : React의 마법 같은 문법

React를 처음 접하는 사람이라면 JSX(JavaScript XML)에 대해 들어봤을 것입니다. JSX는 JavaScript를 확장한 문법으로, HTML과 유사한 구문을 사용하여 React 요소를 정의할 수 있게 합니다. JSX는 React의 강력한 기능 중 하나로, 사용자의 인터페이스를 직관적이고 선언적으로 작성할 수 있도록 도와줍니다.

JSX란 무엇인가?

JSX는 JavaScript를 확장한 문법입니다. JavaScript 코드 내에서 HTML가 유사한 구분을 사용할 수 있게 하여, UI를 구성하는데 직관적이고 가독성 좋은 코드를 작성할 수 있습니다. JSX는 브라우저에서 직접 실행되지 않기 때문에, Babel 같은 트랜스파일러를 사용하여 순수 JavaScript로 변환됩니다.

왜 JSX를 사용하는가?

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

1. 가독성 향상 : JSX는 HTML과 유사하기 때문에, UI코드를 작성하고 이해하는 데 매우 직관적입니다.

2. 생산성 증가 : 컴포넌트의 구조를 직관적으로 작성할 수 있어 개발속도가 향상됩니다.

3. 안전성 : JSX는 XSS(크로스 사이트 스크립팅) 공격을 방지하는 기능을 내장하고 있습니다.

3. 자동 완성 및 문법검사 : 대부분의 IDE에서 JSX에 대한 지원을 제공하여 개발 경험이 향상 됩니다.

JSX의 기본 문법

JSX의 기본 문법은 HTML과 매우 유사하지만, 몇 가지 중요한 차이점이 있습니다.

1. 단일 루트 요소 : JSX 표현식은 반드시 하나의 부모 요소로 감싸져 있어야 합니다.

2. JavaScript 표현식 사용 : 중괄호({}) 안에 JavaScript 표현식을 넣을 수 있습니다.

3. 속성 이름 : HTML 속성 이름대신 camelCase를 사용합니다. (예: className, onClick)

4. 셀프 클로징 태크 : 자식요소가 없는 경우, 태그를 "/>"로 닫아야 합니다.

JSX 예제

기본예제

function Greeting({ name }) {
  return (
    <div className="greeting">
      <h1>안녕하세요, {name}님!</h1>
      <p>오늘도 좋은 하루 되세요.</p>
    </div>
  );
}

function App() {
  return (
    <div className="app">
      <Greeting name="홍길동" />
      <Greeting name="김철수" />
    </div>
  );
}

이 예제에서 볼 수 있듯이, JSX를 사용하면 HTML과 유사한 구조로 컴포넌트를 작성할 수 있습니다. {} 안에 JavaScript 표현식을 넣어 동적인 값을 표현할 수 있고, 컴포넌트를 마치 HTML태크처럼 사용할 수 있습니다.

JSX와 조건부 렌더링

JSX에서는 JavaScript의 조건문을 사용하여 조건부 렌더링을 쉽게 구현할 수 있습니다.

function ConditionalRendering({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>환영합니다!</h1>
      ) : (
        <h1>로그인해 주세요.</h1>
      )}
    </div>
  );
}

이 예제에서는 삼항연산자를 사용하여 isLoggedIn값에 따라 다른 내용을 렌더링 합니다.

JSX와 리스트 렌더링

function FruitList() {
  const fruits = ['사과', '바나나', '오렌지', '망고'];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

여기서는 map함수를 사용하여 배열의 각 항목을 <li> 요소로 변환하고 있습니다. key속성은 React가 리스트 항목의 변경사항을 효율적으로 추적할 수 있게 해 줍니다.

JSX 사용 시 주의사항

1. class 대신 className 사용 : HTML의 class속성대신 className을 사용해야 합니다.

2. 스타일 적용 : 인라인 스타일을 적용할 때는 객체를 사용해야 합니다. 예: style={{color:'red'}}

3. 주석작성 : JSX 내에서 주석을 작성할 때는 {/* */} 형식을 사용합니다.

4. Boolean속성 : true는 생략이 가능하지만, false는 명시적으로 작성해야 합니다.

JSX는 React개발에서 UI를 구성하는 핵심적인 도구입니다. HTML과 유사한 문법으로 직관적인 코드 작성이 가능하며, JavaScript의 강력한 기능을 그대로 활용할 수 있습니다. 초보자 분들도 이 글을 통해 JSX의 기본 개념과 사용법을 이해하셨기를 바랍니다. JSX를 활용하면 더 효율적이고 유지보수가 쉬운 React 애플리케이션을 개발할 수 있습니다.