2:React JSX 완벽 이해: HTML과 JavaScript의 결합 문법

1시간 분량 강의안 (JSX 기초)

강의 목표

1. JSX의 개념과 필요성을 이해한다.
2. JSX 문법을 학습하고, 이를 활용하여 React 컴포넌트를 작성한다.
3. JSX를 활용하여 동적인 데이터를 UI에 표시한다.

---

강의 목차

---

1. JSX란 무엇인가? (15분)

JSX의 정의

• JSX는 JavaScript XML의 약자로, React에서 사용하는 독특한 문법입니다.
• HTML과 유사하게 보이지만, 실제로는 JavaScript로 변환됩니다.
• JSX를 사용하면 UI를 선언적으로 작성할 수 있어 코드가 읽기 쉽고 직관적입니다.

JSX가 필요한 이유

• 기존 방식: 
  • JSX 사용 시:

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

  • 훨씬 간결하고 직관적입니다.

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

JSX의 주요 특징

1. JavaScript와 HTML의 결합: 컴포넌트 안에서 HTML과 같은 구조를 사용하여 UI를 정의.
2. 가독성 향상: HTML-like 문법으로 코드 이해가 쉬움.
3. React 요소로 변환: Babel이 JSX를 React.createElement()로 변환.

---

2. JSX의 기본 문법 (20분)

1단계: JSX 문법

• JSX는 반드시 하나의 부모 요소로 감싸야 합니다.
  

  // 올바른 JSX
  const element = (
    <div>
      <h1>Hello, React!</h1>
      <p>Welcome to JSX world.</p>
    </div>
  );

  
  
  
• 자식 요소가 없으면 self-closing 태그를 사용합니다.

const element = <img src="logo.png" alt="React Logo" />;

 

 

2단계: JavaScript 표현식 사용

• JSX 안에서 JavaScript 표현식을 사용할 수 있습니다.

  const name = 'React';
      const element = <h1>Hello, {name}!</h1>;
  
      // JSX를 반환해야 렌더링됩니다.
      return element;

  
  

  

  
  
  
  • 결과: Hello, React!

    

• 표현식은 중괄호 {} 안에 작성합니다.

 

 

const element = <h1>{1 + 2}</h1>; // 결과: 3

결과값

3단계: 조건부 렌더링

• 삼항 연산자를 사용한 조건부 렌더링:  
• const isLoggedIn = true; const element = <h1>{isLoggedIn ? 'Welcome!' : 'Please log in.'}</h1>; return element;
• 
  
  결과: Welcome!

 

 

---

3. JSX 고급 문법 (15분)

1단계: CSS 클래스 적용

• class 대신 className 속성을 사용합니다.

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

2단계: 인라인 스타일 적용

• JavaScript 객체를 사용하여 스타일 정의:

const style = { color: 'blue', fontSize: '20px' };
const element = <h1 style={style}>Styled Text</h1>;

3단계: HTML 속성 사용

• HTML 속성도 JSX에서 사용할 수 있습니다.

const element = <input type="text" placeholder="Enter text" />;

생성된 텍스트 박스

 

---

4. JSX 실습 (10분)

실습 과제

1. 이름과 나이를 입력받아 "안녕하세요, [이름]! 당신은 [나이]살입니다."를 표시하는 컴포넌트를 작성하세요.
2. isLoggedIn 상태에 따라 "로그인 성공" 또는 "로그인 실패" 메시지를 표시하세요.

예제

• 어플리케이션 생성

  npx create-react-app jsx-basics-course

  
• 실습 1번의 예제:

// App.js

function UserInfo({ name, age }) {
  return (
    <div>
      <h1>안녕하세요, {name}!</h1>
      <p>당신은 {age}살입니다.</p>
    </div>
  );
}

function App() {
  return <UserInfo name="홍길동" age={25} />;
}

export default App;

---

5. Q&A 및 정리 (10분)

• Q&A:
  1. JSX와 HTML의 차이점은 무엇인가요?
  2. JSX를 사용하지 않고 React를 개발할 수 있나요?
• 요약:
  • JSX는 React에서 UI를 선언적으로 작성할 수 있는 강력한 도구입니다.
  • JavaScript와 HTML을 결합하여 코드의 가독성과 생산성을 높여줍니다.
  • JSX는 Babel을 통해 JavaScript 코드로 변환되므로 React의 필수 구성 요소입니다.

---

이 강의안은 초보자도 JSX의 개념과 사용법을 쉽게 이해하고 React 프로젝트에 적용할 수 있도록 설계되었습니다. 추가로 더 알고 싶은 내용이 있다면 말씀해주세요! 😊