React 첫 앱 파일 연결 구조

first app files

첫 화면은 빈 HTML 자리, 진입 파일, App 컴포넌트가 함께 만든다

처음에는 모든 폴더를 외우기보다 세 파일의 연결을 잡으면 된다. 브라우저의 빈 자리, React 연결 코드, JSX 화면이 이어진다.

시작

브라우저는 먼저 HTML 문서를 받는다.

연결

React는 root 요소를 찾아 App을 붙인다.

수정

첫 실습에서는 주로 App.jsx의 JSX를 바꾼다.

index.html

빈 자리

브라우저가 처음 받는 HTML이다. id="root" 요소가 React 화면이 들어갈 자리다.

src/main.jsx

진입 파일

root 요소를 찾고 <App />을 렌더링하도록 React에게 지시한다.

src/App.jsx

화면 내용

현재 보이는 문구와 태그를 반환한다. 입문 실습에서 가장 자주 수정하는 파일이다.

파일

보는 이유

처음 할 일

index.html

React가 들어갈 실제 DOM 자리가 있는지 확인한다.

root div를 지우지 않고 구조를 이해한다.

main.jsx

App 컴포넌트를 브라우저 DOM에 연결하는 시작점이다.

어떤 컴포넌트를 렌더링하는지 확인한다.

App.jsx

화면에 보이는 JSX를 직접 반환한다.

문구를 바꾸고 저장 후 브라우저가 갱신되는지 본다.

수정 지점

App.jsx의 return 안 JSX를 바꾸면 첫 화면이 바뀐다.

스타일 지점

App.css import를 통해 컴포넌트 스타일이 적용된다.

정상 신호

저장 후 문구가 바뀌면 파일 연결과 개발 서버 갱신이 모두 정상이다.