Import ReactDOM

Import ReactDOM

Now take a look at the code on line 2:

 

import ReactDOM from 'react-dom';

 

This line of code is very similar to line 1.

Lines 1 and 2 both import JavaScript objects. In both lines, the imported object contains React-related methods.

 

However, there is a difference!

 

The methods imported from 'react-dom' are meant for interacting with the DOM.

You are already familiar with one of them: ReactDOM.render().

The methods imported from 'react' don’t deal with the DOM at all.

They don’t engage directly with anything that isn’t part of React.

 

To clarify: the DOM is used in React applications, but it isn’t part of React. After all, the DOM is also used in countless non-React applications. Methods imported from 'react' are only for pure React purposes, such as creating components or writing JSX elements.

 

---

Import ReactDOM

 라인2째줄의 코드를 보아라. 

 

 

import ReactDOM from 'react-dom';

 

이 코드는 라인1의 것과 비슷해보인다. 

라인1, 2은 모두 자바스크립트 객체를 import한다. 

이 줄들에서, import된 객체는 react관련 method들을 포함한다. 

 

그러나 다른 것이 있다!

 

'react-dom'으로부터 import된 method들은 DOM과 상호작용한다는 것을 의미한다. 

당신은 이미 그들 중 하나에 친숙하다. : ReactDOM.render()

 

'react'로부터 import된 method들은 전혀 DOM을 다루지 않는다. 

 

그들은 리액트의 일부가 아닌 어떤 것에도 직접적으로 관여하지 않는다.

 

 

 

명확히 하자면, DOM은 리액트 어플리케이션에서 사용되지만 리액트의 일부가 아니다.

결국, DOM은 또한 수많은 비-React 응용 프로그램에서도 사용된다.

'react'에서 import된 method들은 컴포넌트를 생성하너가 JSX요소를 작성하는 것과 같은 오직 순수 react목적을 위한 것들이다.  

 

 

즉,

 

import React from 'react';

는 순수 react목적만을 위한 것으로 컴포넌트를 생성하거나 jsx요소를 작성하도록 하는데 목적을 둔 import.

 

import ReactDOM from 'react-dom';

 는 react가 아니어도 사용되는 것으로 dom과 상호작용을 하는데 사용된다.