✅ React 기초 강좌

🎯 학습 목표

• JSX가 무엇인지 이해하고 기본 문법을 익힌다.
• 함수형 컴포넌트를 만들고 화면에 렌더링한다.
• React에서 HTML과 JavaScript가 섞여있는 이유를 이해한다.

✅ JSX란?

JSX는 JavaScript XML의 약자로, JavaScript 안에서 HTML처럼 보이는 문법을 사용할 수 있게 해주는 React의 확장 문법입니다.

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

• JSX는 브라우저가 직접 실행하지 못하며, 빌드 시 Babel이 JavaScript 코드로 변환합니다.
• 아래처럼 바뀝니다:

React.createElement('h1', null, 'Hello, world!');

🔠 JSX 문법 기초

1. 반드시 하나의 부모 요소로 감싸야 함

// ❌ 오류 발생
return (
  <h1>Title</h1>
  <p>Description</p>
);

// ✅ Fragment 또는 div로 감싸기
return (
  <><h1>Title</h1>
    <p>Description</p>
  </>
);

2. JavaScript 표현식은 중괄호 {}로 감싸기

const name = '리액트';
return <h1>안녕하세요, {name}!</h1>;

3. HTML 속성은 camelCase로 작성

return <button className="btn" onClick={handleClick}>클릭</button>;

4. 조건부 렌더링

const isLoggedIn = true;
return <h1>{isLoggedIn ? '환영합니다!' : '로그인 해주세요'}</h1>;

🧱 함수형 컴포넌트 구조

React는 컴포넌트를 함수로 정의합니다. 대문자로 시작하는 것이 관례입니다.

function Welcome() {
  return <h2>Welcome 컴포넌트입니다.</h2>;
}

function App() {
  return (
    <div>
      <Welcome />
      <p>JSX는 쉽습니다!</p>
    </div>
  );
}

🧠 정리

✍️ 과제

1. 아래 요구사항을 만족하는 UserCard 컴포넌트를 만들어보세요.
   • 사용자 이름(name)과 나이(age)를 props로 전달받아 출력
   • App에서 <UserCard name="홍길동" age={30} /> 형태로 호출

예시 결과:

// 출력 결과
홍길동님은 30세입니다.

1. App.jsx 안에 <UserCard />를 삽입해 화면에 표시되도록 하세요.