1. JSX 기초

JSX(JavaScript XML)는 React에서 사용하는 특별한 문법입니다. HTML과 매우 비슷하지만 JavaScript 코드 안에서 사용할 수 있어서, UI 코드의 가독성과 유지보수성을 높여줍니다.

1.1 JSX란 무엇인가요?

JSX는 JavaScript의 확장 문법으로, HTML과 유사한 문법을 JavaScript 코드에서 사용할 수 있게 해줍니다.

1.1.1 일반 JavaScript vs JSX

일반적인 JavaScript로 React 요소를 만들면:

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

JSX를 사용하면:

const element = <h1 className="greeting">Hello, world!</h1>;

JSX가 훨씬 더 직관적이고 읽기 쉽다는 것을 알 수 있습니다.

1.2 JSX 기본 문법

1.2.1 JSX 표현식

JSX 안에서 JavaScript 표현식을 사용하려면 중괄호 {}로 감츉니다:

function App() {
  const name = 'React';
  const version = 18;
  
  return (
    <div>
      <h1>안녕하세요, {name}!</h1>
      <p>현재 버전: {version}</p>
      <p>계산 결과: {10 + 20}</p>
    </div>
  );
}

1.2.2 속성 지정하기

JSX에서 속성을 지정할 때는 camelCase를 사용합니다:

function App() {
  return (
    <div>
      <img src="logo.png" alt="로고" />
      <button onClick={handleClick} className="btn-primary">
        클릭하세요
      </button>
    </div>
  );
}

1.2.3 스타일 적용하기

JSX에서 스타일을 적용하는 방법은 두 가지입니다:

1.2.3.1 CSS 클래스 사용

// App.css
.title {
  color: blue;
  font-size: 24px;
}

// App.js
import './App.css';

function App() {
  return <h1 className="title">제목</h1>;
}

1.2.3.2 인라인 스타일 사용

function App() {
  const titleStyle = {
    color: 'blue',
    fontSize: '24px',
    textAlign: 'center'
  };
  
  return (
    <div>
      <h1 style={titleStyle}>제목 1</h1>
      <h2 style={{color: 'red', margin: '10px'}}>제목 2</h2>
    </div>
  );
}

1.3 JSX의 핵심 규칙

1.3.1 최상위 요소는 하나여야 합니다

JSX에서는 반드시 하나의 부모 요소로 감싸야 합니다:

// ❌ 잘못된 예
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  );
}

// ✅ 올바른 예
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

불필요한 div를 만들고 싶지 않다면 React Fragment를 사용하세요:

// React Fragment 사용
function App() {
  return (
    <React.Fragment>
      <h1>제목</h1>
      <p>내용</p>
    </React.Fragment>
  );
}

// 축약형
function App() {
  return (
    <>
      <h1>제목</h1>
      <p>내용</p>
    </>
  );
}

1.3.2 태그는 반드시 닫아야 합니다

HTML에서는 <img>, <br> 같은 태그를 닫지 않아도 되지만, JSX에서는 반드시 닫아야 합니다:

// ❌ 잘못된 예
<img src="logo.png">
<br>

// ✅ 올바른 예
<img src="logo.png" />
<br />

1.3.3 JSX에서 주석 작성하기

JSX 내부에서 주석을 작성할 때는 {/* */} 형태를 사용합니다:

function App() {
  // 여기는 JavaScript 영역이므로 일반 주석 가능
  return (
    <div>
      {/* JSX 내부 주석 */}
      <h1>제목</h1>
      {/* 
        여러 줄 주석도 
        이렇게 작성할 수 있습니다 
      */}
      <p>내용</p>
    </div>
  );
}

1.4 실습: 간단한 프로필 카드 만들기

지금까지 배운 내용을 활용해서 간단한 프로필 카드를 만들어봅시다:

function App() {
  const user = {
    name: '김개발',
    age: 25,
    job: '프론트엔드 개발자',
    skills: ['JavaScript', 'React', 'CSS']
  };

  const cardStyle = {
    border: '1px solid #ddd',
    borderRadius: '8px',
    padding: '20px',
    maxWidth: '300px',
    margin: '20px auto',
    textAlign: 'center',
    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
  };

  const avatarStyle = {
    width: '80px',
    height: '80px',
    borderRadius: '50%',
    backgroundColor: '#61dafb',
    margin: '0 auto 15px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '32px',
    color: 'white'
  };

  return (
    <div className="App">
      <div style={cardStyle}>
        <div style={avatarStyle}>
          {user.name[0]}
        </div>
        <h2>{user.name}</h2>
        <p>나이: {user.age}세</p>
        <p>직업: {user.job}</p>
        <div>
          <h3>보유 스킬:</h3>
          <p>{user.skills.join(', ')}</p>
        </div>
        <button style={{
          backgroundColor: '#61dafb',
          color: 'white',
          border: 'none',
          padding: '8px 16px',
          borderRadius: '4px',
          cursor: 'pointer'
        }}>
          연락하기
        </button>
      </div>
    </div>
  );
}

export default App;

1.5 JSX와 HTML의 차이점 정리

1.6 조건부 렌더링 기초

JSX에서는 조건에 따라 다른 내용을 보여줄 수 있습니다:

function App() {
  const isLoggedIn = true;
  const user = '김개발';

  return (
    <div>
      {isLoggedIn ? (
        <h1>안녕하세요, {user}님!</h1>
      ) : (
        <h1>로그인해주세요</h1>
      )}
      
      {isLoggedIn && <button>로그아웃</button>}
    </div>
  );
}

1.7 정리

JSX의 핵심 개념을 배웠습니다:

1. JSX는 JavaScript 안에서 HTML과 유사한 문법을 사용할 수 있게 해줍니다
2. 중괄호 {}로 JavaScript 표현식을 사용합니다
3. 최상위 요소는 하나여야 합니다 (Fragment 사용 가능)
4. 모든 태그는 닫혀야 합니다
5. 속성명은 camelCase를 사용합니다
6. 스타일은 객체 형태로 작성합니다

다음 장에서는 JSX의 더 고급 기능들을 살펴보겠습니다.