React 프로젝트 세팅03 - 파일 연결 구조 이해

1. React 프로젝트 구조 이해

React 프로젝트는 어떻게 실행될까?

 

1) 시작점 : index.html

브라우저가 가장 먼저 읽는 파일

<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>

 

여기서 중요한 것!

React 앱이 여기에 들어감!!

<div id="root"></div>

 

 

그리고!

React 앱을 실행하는 파일 이다.

<script type="module" src="/src/main.tsx"></script>

 

 

2) 두번째 : main.tsx

여기서 React 앱을 실행함

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

 

첫번째, root div 찾기

document.getElementById("root")

 

두번째, React 앱을 거기에 넣기

<App/>

 

 

3) 세째 : app.tsx

function App() {
  return (
    <h1>Vite + React</h1>
  )
}

return 내부에 React UI 코드 작성

 

 

4) 전체흐름

index.html
   │
   │ script
   ▼
main.tsx
   │
   │ render()
   ▼
App.tsx
   │
   ▼
React 화면

 

index.html → main.tsx → App.tsx 순서로 연결되며

main.tsx가 React 앱을 실행하고 App.tsx가 실제 화면(UI)을 만든다.

 

따!라!서!

React가 진짜 시작되는 지점은 이부분 부터 이다!

createRoot(document.getElementById('root'))

 

 

 

2. React createRoot에서 ! 를 사용해도 될까?

변! 경! 필! 요!

 

 

[기존코드 - 기본세팅]

createRoot(document.getElementById('root')!).render(...)

 

document.getElementById('root') 이 값은

타입스크립트 기준으로 HTMLElement | null 이다.

(왜냐하면 root가 없을 수도 있기 때문)

 

그런데 ! 를 붙임

느낌표를 붙이면 타입스크립 검사를 무시 하는것!

그래서 무책임한 코드라고 볼 수 있다.

(!을 사용하면 그냥 믿고 실행하라는 의미)

 

 

[변경 코드]

const rootElement = document.getElementById('root')

if (!rootElement) {
  throw new Error('#root 요소가 없습니다')
}

실제로 root가 있는지 확인

 

null이면 에러 발생
null이 아니면 React 실행

 

최! 종! 정! 리!

document.getElementById('root')! 는 null이 아니라고

TypeScript에게 강제로 알려주는 코드이고,
if문을 사용하면 실제로 root 요소가 있는지 확인하는 더 안전한 코드가 된다.

 

React 프로젝트 세팅 03
root체크에서 ! 사용의 문제점과 대안

---

2026.03.06 - 수업내용