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

Question

안녕하세요~ 정환님

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

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

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

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

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

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

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

Answer

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

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

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

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

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