inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[React 1부] 만들고 비교하며 학습하는 React

[소개] 프로젝트 구조 변경하기

각 파일들의 역할에 대해

277

김주현

작성한 질문수 13

0

안녕하세요

 

index.html,

App.js

main.js 

 

의 각각 역할이 잘 이해되지 않습니다.

 

index.html 은 최상위 DOM 을 위한 것이고

App.js 는 추후 거대한 서랍장을 만들기 위한 파일이고

main.js 는 React JSX 문법을 사용하기 위한 파일인가요?

 

궁금하여 질문 드립니다 감사합니다.

react MVC

답변 1

1

김정환

각 파일의 역할이 궁금하신 거죠?

App.js는 리액트 컴포넌트입니다. App이라는 거대한 서랍장이 맞습니다.

그리고 index.html은 문서(document)라고도 부르는 웹페이지입니다. 브라우져는 이 문서를 읽어서 화면에 그려 주죠.

App 컴포넌트는 어딘가게 그려져야하는데요 바로 문서 위에 그려야 합니다. 아직 App.js만으로는 화면에 출력될수 없죠. App.js를 index.html에 로딩해도 그려지지는 않아요.

main.js에 보시면 ReactDOM을 사용하는데요. 이녀석이 컴포넌트를 문서에 그려주는 역할을 합니다.

// 컴포넌트를 문서에 그려라
ReactDOM.render(
  // 이 컴포넌트를
  <App />, 
  // 이 문서의 특정 위치에
  document.querySelector('#app')
)

리액트 1,2부 이후 후속 강의나 준비 중인 다른 강의가 있으신가요?

1

117

2

super.show() 호출하는 이유가 궁금합니다.

1

103

2

class와 constructor를 이용한 객체 지향 프로그래밍

0

243

2

mvc 패턴 질문

0

211

2

Cannot read properties of undefined (reading 'props')

0

291

2

delegate, emit 필요한 이유

0

206

2

어떤거를 먼저 들어야 하는지 도와주세요

1

275

1

localhost:8080 접속 불가

1

296

1

최근검색어 3 풀이에서

1

195

1

import 문제

1

247

1

자동변환 관련

1

213

1

sort() 질문 드립니다.

1

312

2

reset 시점에 searchResult 빈 배열로 update

2

321

2

Button에 Onclick사용

1

263

1

npx lite-server error 확인 요청드립니다.

1

484

2

node 20이상 쓸때 꿀팁

4

781

3

디버깅 관련질문이 있습니다.

1

310

1

[순수JS2]탭 3(풀이) 질문있습니다.

1

236

1

추상화를 어떻게 받아들이면 될까요??

1

446

1

on 메서드 eventName 문의

1

268

1

import에 관해서 질문드립니다

1

264

1

view.js의 on 메소드에 대해 질문드립니다

1

266

1

componentDidMount에서 getKeywordList()를 하는 이유

1

249

1

[순수JS1]검색폼2_git branch 이동관련

1

285

1