inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

[구현하기 1] SearchForm 1 강의 중 질문있습니다.

해결된 질문

340

짱구

작성한 질문수 28

2

안녕하세요~ 정환님 

강의를 듣던 중에 궁금한 점이 생겨서 이렇게 질문 드립니다.

아래의 코드는 강의 중에 등장하는 SearchForm.js 입니다.

render() 함수는 ReactDOM에서 제공하는 메소드로 알고 있는데요. 

현재 코드 같은 경우는 ReactDOM 을 import 하지 않고도 정상적으로 작동합니다. 

물론, 정환님께서 강의하시면서, 시연해주실 때도 정상적으로 작동했구요.

그래서, 살짝 혼란스럽습니다. 

Q) ReactDOM 을 import 하지 않고도 render()를 사용할 수 있는 이유가 뭔가요??

 

render react ReactDOM MVC

답변 1

1

김정환

수업에서 render()  함수가 두 번 등장하는데요. 그래서 헷갈리셨나 봅니다.

먼저 ReactDOM.render() 함수는 돔(DOM)에 리액트 앨리먼트를 그리는 역할을 합니다.  main.js에 있는 이 코드가 그런 일을 하구요.

ReactDOM.render(<App />, document.querySelector('#app')

한편 리액트 컴포넌트의 Component#render()는 컴포넌트 객체의 메소드인데요. 리액트 앨리먼트를 만드는 역할을 합니다.

정리하면 Component#render() 메소드가 리액트 앨리먼트를 만든다.  이 메소드를 가진 리액트 컴포넌트를 조합해 <App /> 컴포넌트를 만들고, 이를 ReactDOM.render() 함수가 돔에 그린다. 입니다.

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

1

90

2

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

1

81

2

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

0

224

2

mvc 패턴 질문

0

197

2

Cannot read properties of undefined (reading 'props')

0

270

2

delegate, emit 필요한 이유

0

196

2

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

1

265

1

localhost:8080 접속 불가

1

282

1

최근검색어 3 풀이에서

1

188

1

import 문제

1

232

1

자동변환 관련

1

203

1

sort() 질문 드립니다.

1

304

2

reset 시점에 searchResult 빈 배열로 update

2

311

2

Button에 Onclick사용

1

247

1

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

1

470

2

node 20이상 쓸때 꿀팁

4

759

3

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

1

295

1

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

1

229

1

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

1

435

1

on 메서드 eventName 문의

1

266

1

import에 관해서 질문드립니다

1

254

1

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

1

258

1

componentDidMount에서 getKeywordList()를 하는 이유

1

241

1

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

1

279

1