1
// 컴포넌트: Greeting이라는 함수
2
function Greeting() {
3
  // JSX: 이 컴포넌트가 그릴 UI를 JSX 문법으로 작성
4
  return <h1>안녕하세요!</h1>;
5
}
6

7
// 위 JSX는 실제로 이렇게 변환됨
8
function Greeting() {
9
  return React.createElement('h1', null, '안녕하세요!');
10
}

1
// 가장 간단한 컴포넌트
2
function Hello() {
3
  return <div>안녕!</div>;
4
}
5

6
// 화살표 함수로도 작성 가능
7
const Hello = () => {
8
  return <div>안녕!</div>;
9
};
10

11
// return이 한 줄이면 괄호 생략 가능
12
const Hello = () => <div>안녕!</div>;

1
// Button 컴포넌트 정의
2
function Button() {
3
  return <button>클릭하세요</button>;
4
}
5

6
// App 컴포넌트에서 Button 사용
7
function App() {
8
  return (
9
    <div>
10
      <h1>내 앱</h1>
11
      <Button />  {/* Button 컴포넌트를 HTML 태그처럼 사용 */}
12
      <Button />  {/* 여러 번 재사용 가능 */}
13
    </div>
14
  );
15
}

1
function Greeting() {
2
  // return 전에 자바스크립트 로직 작성
3
  const name = "철수";
4
  const hour = new Date().getHours();
5
  const greeting = hour < 12 ? "좋은 아침" : "안녕하세요";
6

7
  // JSX에서 변수 사용
8
  return (
9
    <div>
10
      <h1>{greeting}, {name}님!</h1>
11
      <p>현재 시각은 {hour}시입니다.</p>
12
    </div>
13
  );
14
}

1
// 우리가 작성하는 JSX
2
const element = <h1 className="title">안녕!</h1>;
3

4
// Vite(Babel)가 변환한 실제 자바스크립트
5
const element = React.createElement(
6
  'h1',
7
  { className: 'title' },
8
  '안녕!'
9
);

1
// 오류 발생! - 두 개의 형제 태그
2
function App() {
3
  return (
4
    <h1>제목</h1>
5
    <p>내용</p>
6
  );
7
}
8

9
// 해결책 1: div로 감싸기
10
function App() {
11
  return (
12
    <div>
13
      <h1>제목</h1>
14
      <p>내용</p>
15
    </div>
16
  );
17
}
18

19
// 해결책 2: Fragment 사용 (권장)
20
function App() {
21
  return (
22
    <>  {/* Fragment: 화면에 렌더링되지 않는 투명한 태그 */}
23
      <h1>제목</h1>
24
      <p>내용</p>
25
    </>
26
  );
27
}

1
// HTML에서는 OK, JSX에서는 오류
2
<input type="text">
3
<br>
4
<img src="image.jpg">
5

6
// JSX에서는 이렇게 닫아야 함 (Self-closing tag)
7
<input type="text" />
8
<br />
9
<img src="image.jpg" />
10
<hr />

1
function Welcome() {
2
  const name = "철수";
3
  const age = 20;
4
  const isAdult = age >= 18;
5

6
  return (
7
    <div>
8
      {/* 변수 */}
9
      <h1>안녕, {name}!</h1>
10

11
      {/* 계산식 */}
12
      <p>10년 후 나이: {age + 10}</p>
13

14
      {/* 삼항 연산자 */}
15
      <p>{isAdult ? "성인" : "미성년자"}</p>
16

17
      {/* 함수 호출 */}
18
      <p>대문자 이름: {name.toUpperCase()}</p>
19
    </div>
20
  );
21
}

1
// JSX 방식
2
<div className="container">
3
  <label htmlFor="name">이름</label>
4
  <button onClick={handleClick}>클릭</button>
5
</div>

1
// JSX 방식 (객체 사용, 속성명은 카멜케이스)
2
<div style={{ color: 'red', fontSize: '20px' }}>텍스트</div>
3
//           ↑ 첫 번째 중괄호: JS 표현식
4
//            ↑ 두 번째 중괄호: 객체 리터럴
5

6
// 변수로 분리하면 더 깔끔
7
const myStyle = {
8
  color: 'red',
9
  fontSize: '20px',
10
  backgroundColor: '#f0f0f0'  // background-color → backgroundColor
11
};
12

13
return <div style={myStyle}>텍스트</div>;

1
function App() {
2
  return (
3
    <div>
4
      {/* JSX 안에서 주석: 중괄호 안에 /*  */ 사용 */}
5
      <h1>제목</h1>
6

7
      {/*
8
        여러 줄 주석도 가능
9
        이렇게 작성합니다
10
      */}
11
    </div>
12
  );
13
}

1
{isLoggedIn ? (
2
  <button>로그아웃</button>
3
) : (
4
  <button>로그인</button>
5
)}

1
{messageCount > 0 && (
2
  <div>새 메시지 {messageCount}개</div>
3
)}

1
let content;
2
if (user.age < 18) {
3
  content = <p>미성년자는 이용할 수 없습니다.</p>;
4
} else {
5
  content = <p>환영합니다!</p>;
6
}
7

8
return <div>{content}</div>;