Module 1

JSX와 첫 번째 컴포넌트

JSX 문법을 이해하고 첫 번째 React 컴포넌트를 만들어봐요.

JSX 기초 이해하기

JSX 기초

JSX 문법을 이해하고 첫 번째 React 컴포넌트를 만들어봐요.

핵심 포인트

JSX는 JavaScript 안에서 HTML처럼 UI를 작성할 수 있게 해줘요
중괄호 {} 안에 JavaScript 표현식을 넣을 수 있어요
JSX는 빌드 시 React.createElement() 호출로 변환돼요
className, htmlFor 등 HTML과 다른 속성명을 사용해요

💡 관련 키워드: jsx, syntax, rendering, html, javascript

JSX 기초 코드로 보기

React에서 JSX 기초이(가) 실제로 어떻게 사용되는지 아래 코드를 읽어보세요.

// JSX 기초 예시 (React)
// JSX는 JavaScript 안에서 HTML처럼 UI를 작성할 수 있게 해줘요

// 💡 실제 프로젝트에서 이 패턴을 찾아보세요!

Quiz

퀴즈: JSX에서 class 대신 className을 쓰는 이유

JSX에서 class 대신 className을 쓰는 이유

다음 중 올바른 설명은 무엇일까요?

AJSX는 JavaScript 안에서 HTML처럼 UI를 작성할 수 있게 해줘요

B위 설명과 반대되는 내용이에요

C이것은 JSX 기초와(과) 관련 없는 설명이에요

Quiz

퀴즈: JSX 표현식 삽입 방법

JSX 표현식 삽입 방법

다음 중 맞는 것을 고르세요.

A이것은 JSX 기초와(과) 관련 없어요

B중괄호 {} 안에 JavaScript 표현식을 넣을 수 있어요

C이건 다른 개념에 대한 설명이에요

컴포넌트와 Props 이해하기

컴포넌트와 Props

JSX 문법을 이해하고 첫 번째 React 컴포넌트를 만들어봐요.

핵심 포인트

컴포넌트는 UI를 독립적인 조각으로 나누는 방법이에요
Props는 부모에서 자식 컴포넌트로 데이터를 전달하는 방법이에요
함수 컴포넌트가 현재 React의 표준이에요
Props는 읽기 전용이에요 — 자식에서 직접 수정하면 안 돼요

선수 개념

이 내용을 배우기 전에 jsx-basics 개념을 먼저 이해하면 좋아요.

💡 관련 키워드: component, props, reusable, function, composition

컴포넌트와 Props 코드로 보기

React에서 컴포넌트와 Props이(가) 실제로 어떻게 사용되는지 아래 코드를 읽어보세요.

// 컴포넌트와 Props 예시 (React)
// 컴포넌트는 UI를 독립적인 조각으로 나누는 방법이에요

// 💡 실제 프로젝트에서 이 패턴을 찾아보세요!

Quiz

퀴즈: Props의 단방향 데이터 흐름

Props의 단방향 데이터 흐름

다음 중 올바른 설명은 무엇일까요?

A컴포넌트는 UI를 독립적인 조각으로 나누는 방법이에요

B위 설명과 반대되는 내용이에요

C이것은 컴포넌트와 Props와(과) 관련 없는 설명이에요

Quiz

퀴즈: 컴포넌트 합성 패턴

컴포넌트 합성 패턴

다음 중 맞는 것을 고르세요.

A이것은 컴포넌트와 Props와(과) 관련 없어요

BProps는 부모에서 자식 컴포넌트로 데이터를 전달하는 방법이에요

C이건 다른 개념에 대한 설명이에요

Challenge

도전! JSX와 첫 번째 컴포넌트 실습하기

실습 과제

이번 모듈에서 배운 내용을 직접 코드로 작성해보세요.

새 파일을 만들어서 배운 개념을 적용해보세요
기존 프로젝트에서 비슷한 패턴을 찾아 수정해보세요
콘솔에서 결과를 확인하세요

💪 직접 코드를 작성하는 것이 가장 효과적인 학습 방법이에요!

내 프로젝트에서 찾아보기 🔍

프로젝트 탐색

JSX와 첫 번째 컴포넌트 개념이 여러분의 프로젝트에서 어떻게 사용되는지 찾아보세요.

프로젝트 파일에서 관련 코드를 검색해보세요
AI가 생성한 코드 중 이 패턴이 적용된 부분을 찾아보세요
"왜 이렇게 작성했을까?" 생각하며 읽어보세요

🎯 내 코드에서 배운 개념을 발견하면 진짜 이해한 거예요!

Next Module