Edit Render Refresh

첫 React 앱 수정 루프

첫 React 앱은 프로젝트 구조를 읽고, App 컴포넌트를 수정하고, JSX와 CSS가 화면에 반영되는 흐름을 확인하는 과정입니다.

src코드 위치
App첫 화면 컴포넌트
JSXUI 구조 작성
CSS스타일 반영
01

프로젝트 구조

src 폴더의 컴포넌트와 스타일 파일을 중심으로 앱을 수정합니다.

02

App 수정

기본 화면을 바꾸며 컴포넌트가 함수처럼 UI를 반환한다는 감각을 잡습니다.

03

JSX

JavaScript 안에 HTML과 비슷한 UI 구조를 작성하는 문법입니다.

04

스타일 적용

className과 CSS 파일을 연결해 React 화면의 모양을 조정합니다.

수정 확인

  • 화면이 바뀌지 않으면 개발 서버가 실행 중인지 먼저 봅니다.
  • JSX에서는 class 대신 className을 써야 합니다.
  • 컴포넌트가 반환하는 최상위 구조와 괄호 위치를 주의합니다.

파일 역할

src소스
App.jsx화면
main.jsx마운트
CSS스타일