728x90
1. localhost:5173 으로 접속 할 수 있었던 이유
- 리액트 앱에 웹서버가 내장 되어 있어 npm run dev는 리액트 서버 가동 명령어이기 때문
- 포트번호 : 하나의 컴퓨터에서 여러 대의 서버를 동작시키기 위해 필요한 주소
→ 프로그램이 실행 될 때마다 컴퓨터가 자동으로 고유한 포트번호를 지정해 줌
2. 화면에 요소를 랜더링 하는 원리
- 우리가 localhost:5173 으로 접속을 하면 리액트는 index.html 파일을 브라우저에 보여준다.
index.html
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
main.jsx
createRoot(document.getElementById('root')).render(
<StrictMode>
<App />
</StrictMode>,
)
index.html 에 연결 된 스크립트파일 main.jsx에서 root라는 이름으로 전달이 되고 있고,
리액트는 이 요소를 리액트의 root로 변환, 메서드를 호출해서 이렇게 만든 root 아래에 app 컴포넌트를 랜더링 하겠다 라고 설정되어 있음
그리고 이 app 컴포넌트는 상단 import 문에서 찾을 수 있다.
import App from './App.jsx'
리액트에서는 함수가 html 태그를 리턴하고 있으면 컴포넌트라고 부른다.
app.jsx을 열어보면 app이 html 태그를 리턴하도록 되어있다.
728x90
'React > 한입크기로 잘라먹는 리액트' 카테고리의 다른 글
| [React.js] 실습 준비하기 (0) | 2025.02.26 |
|---|---|
| [React.js] React App 생성하기 (0) | 2025.02.19 |
| [React.js] React.js란 (0) | 2025.01.22 |
| [Node.js] 라이브러리 사용하기 (0) | 2025.01.20 |
| [Node.js] 모듈 시스템 이해하기 (0) | 2025.01.10 |