import React, ReactDOM의 필요성

오늘은 리액트 최상단 index.tsx 파일에서 기본으로 사용되는, import된 객체들에 대해서 정리해보려고 한다.
사실 정말 기본적인 부분이라 기억하고 있어야 했는데ㅜㅜ
앞으로는 잊지 말고 머릿속에 넣어둘 수 있도록 정리해보려고 한다🤔

import React from 'react'

특히나 ReactDOM보다도 왜 불러와야하는 객체였는지 생각이 안났다..
최상단 index.tsx 파일 내에서 이미 import React를 하기도 하고, 요즘엔 생략해도 되는 부분이어서 어쩌면 JS로 변경되도록 만들어주는 가장 중요한 역할을 하는 것임에도 불구하고 너무 관심을 가지지 못했다😭

오늘의 반성 : 기초 이론은 까먹지 말자

역할

브라우저는 정적 리소스들만 해석할 수 있다.
React에서 JSX(자바 스크립트 확장 문법)을 JS로 변환시키는 과정에서 React 객체가 사용되는데, 이때 사용할 객체를 불러오기 위해 import React from 'react' 구문을 통해 가져오게 된다!

[index.tsx]

import React from 'react'; // 가장 최상단 index.tsx 파일에서 불러와지고 있는 React 객체!
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>,
);

[App.tsx]

// JSX 문법으로 작성된 우리가 평소에 볼 수 있는 코드
function App() {
	return <h1>Hello World!</h1>
}

// JSX -> JS 변환 시, React 객체를 활용하여 변환되는 것!
function App() {
	return React.createElement('h1', null, 'Hello World!');
}

이 외에도 StrictMode를 사용할 때도 React 객체가 필요하다!
StrictMode를 사용하지 않는다면, React 17 버전 이후부터는 최상단 index.tsx 파일에서 import React를 굳이 하지 않아도 되는 듯 싶다~

왜냐하면, 이제는 굳이 불러오지 않더라도 기계어로 변경되는 컴파일 과정 때 알아서 인식된다고 한다.

import ReactDOM from 'react-dom/client'

ReactDOM은 최상단 root 노드를 만들 때 사용하고.. 뭐 대강 기억나긴 했는데,
대강 기억하면 뭐하나 !!! 설명을 제대로 하지 못하는데 !!! 나 자신 반성해 !!! 💩

역할

ReactDOM은 웹 인터페이스랑 가장 밀접한 관련이 있는 부분으로,
최상단 root 노드를 화면에 불러오는 역할을 한다.

ReactDOM에서 변경 사항부분과, 실제 DOM을 비교하며 차이점을 확인 후 조작하는 역할을 한다.
즉, 리액트를 공부하면서 지겹게 들었던 DOM 비교 후 업데이트하는 역할을 import ReactDOM이 실질적으로 하고 있는 것이었다 ;;

저렇게 네이밍 된 이유가 있다. ReactDOM ..
이론이 생각나지 않을땐 네이밍에서 힌트를 얻어가는 것도 좋은 방법이라 생각한다.

[index.tsx]

import React from 'react';
import ReactDOM from 'react-dom/client'; // ReactDOM 불러오기 !
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

root.render(
  <React.StrictMode>
	<App />
  </React.StrictMode>,
);