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

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

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

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

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

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

// App 컴포넌트에서 Button 사용
function App() {
  return (
    <div>
      <h1>내 앱</h1>
      <Button />  {/* Button 컴포넌트를 HTML 태그처럼 사용 */}
      <Button />  {/* 여러 번 재사용 가능 */}
    </div>
  );
}

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

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

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

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

// 오류 발생! - 두 개의 형제 태그
function App() {
  return (
    <h1>제목</h1>
    <p>내용</p>
  );
}

// 해결책 1: div로 감싸기
function App() {
  return (
    <div>
      <h1>제목</h1>
      <p>내용</p>
    </div>
  );
}

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

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

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

function Welcome() {
  const name = "철수";
  const age = 20;
  const isAdult = age >= 18;

  return (
    <div>
      {/* 변수 */}
      <h1>안녕, {name}!</h1>

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

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

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

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

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

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

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

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

      {/*
        여러 줄 주석도 가능
        이렇게 작성합니다
      */}
    </div>
  );
}

{isLoggedIn ? (
  <button>로그아웃</button>
) : (
  <button>로그인</button>
)}

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

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

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