초보자를 위한 React

초보자를 위한 React는 함수형 컴포넌트로 브라우저 인터페이스를 만드는 9개 랩의 입문 과정입니다. Vite 프로젝트에서 JSX를 편집하고 컴포넌트를 조합하며 데이터를 전달하고 로컬 상태, 버튼, 동적 목록, 조건부 콘텐츠, 폼을 구현합니다.

각 가이드형 랩은 한 개념에 집중합니다. 개발 서버를 실행하고 내장 브라우저에서 변경을 보며 작은 코드 수정으로 컴포넌트 중심 흐름을 이해합니다.

학습 내용

• Vite React 프로젝트 탐색, 의존성 설치, 개발 서버 실행
• 함수형 컴포넌트 생성, 내보내기, 가져오기, 조합
• 표현식, 속성, 자체 닫힘 요소, Fragment를 사용한 JSX 작성
• props, 구조 분해, 기본값으로 부모에서 자식으로 값 전달
• useState Hook으로 로컬 상태와 업데이트 관리
• 이벤트 핸들러 연결, 이벤트 객체 확인, 브라우저 기본 동작 방지
• 삼항·논리 연산자, 변수, 상태를 이용한 조건부 렌더링
• 배열을 key가 있는 요소로 변환하고 제어 입력과 폼 제출 구현

추천 대상

JavaScript 기초를 알고 현대적인 함수형 컴포넌트를 안내에 따라 배우려는 React 입문자에게 적합합니다. 더 큰 앱을 만들기 전에 JSX, props, 상태, 브라우저 이벤트의 연결을 이해하려는 프론트엔드 초보자에게도 유용합니다.

선수 지식: 함수, 변수, 배열, 객체, import, 배열 map 등 JavaScript 기초를 권장합니다. HTML 요소와 속성을 알면 도움이 됩니다. React나 Vite 경험은 필요하지 않습니다.

학습 환경: 9개 랩 모두 Node.js, npm, 편집기, 터미널, Web 8080 미리보기가 있는 Ubuntu 22.04 React WebIDE에서 실행됩니다. Vite React 서버를 시작하고 핫 모듈 교체로 업데이트를 확인합니다.

자주 묻는 질문

완성된 React 애플리케이션 하나를 만들게 되나요?

아닙니다. 컴포넌트, 카운터, 조건부 화면, 목록, 제어 폼 같은 집중 예제를 만듭니다. 핵심 원리를 배우지만 누적형 종합 앱은 없습니다.

함수형 컴포넌트와 클래스 컴포넌트 중 무엇을 사용하나요?

함수형 컴포넌트와 useState Hook을 사용합니다. 클래스 컴포넌트와 생명주기는 포함하지 않습니다.

라우팅, API, 고급 Hook도 다루나요?

아닙니다. React Router, 데이터 가져오기, useEffect, Context, 커스텀 Hook, TypeScript, 테스트, 상태 관리 라이브러리, 배포는 범위 밖입니다.

내 컴퓨터에 React를 설치해야 하나요?

아닙니다. 각 랩이 WebIDE에 Vite React 프로젝트를 준비합니다. npm과 개발 서버를 제공 환경 안에서 사용하므로 로컬 설정이 필요하지 않습니다.