[React] 컴포넌트를 소문자가 아닌 대문자로 작성하는 이유 / ReactDOM

1. React 컴포넌트는 반드시 대문자로 시작해야 한다

JS에서는 function을 소문자로 적었었는데 React에서는 컴포넌트로 사용하기 때문에 에러가 발생하였다.

 

그 이유를 구글링으로 찾아본 결과,

ReactDom.render 시 엘리먼트 자리에 소문자로 시작하는 것은 DOM태그로 인식하기 때문에 사용자가 직접 작성한 컴포넌트를 엘리먼트 자리에 넣어 실행할 경우에는 대문자로 시작해야 정확히 인식한다.

라고 하는데 ReactDOM이 렌더링 시에 소문자는 html 일반 태그로 인식하기 때문에 대문자로 컴포넌트를 구분한다는 것은 이해가 됐다.

 

근데 'ReactDom.render시' 라는 말을 정확하게 이해하고 싶었다.

 

 

2. ReactDOM이란?

React를 사용하기 위해서는 먼저 React와 ReactDOM이라는 라이브러리가 필요한데

React는 View를 만들기위한 라이브러리이고, 

ReactDOM은 UI를 실제로 브라우저에 렌더링 할 때 사용하는 라이브러리이다.

 

즉, Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이고,

렌더링 과정에서 React.createElement로 만든 react element를 실제 DOM element로 변환하게 된다.

 

React.createElement ?

React.createElement(
  type, // 태그 이름 문자열 | 리액트 컴포넌트 | React.Fragment
  [props], // 리액트 컴포넌트에 넣어주는 데이터 객체
  [ ... children] // 자식으로 넣어주는 요소들
);

ReactDOM.render(
  React.createElement("h1", {className: 'title'}, `Hello World!`),
  document.querySelector("#root")
);

ReactDOM이 렌더링되면 title 클래스명을 가진 h1 태그로 'Hello World!'가 React.createElement로 만들어져

HTML 내 <div id="root"></div>인 요소 내부에 렌더링될 것이다.

 

참고로 보통의 경우는 아래와 같이 App 컴포넌트로 렌더링된다.

ReactDOM.render(<App />, document.querySelector("#root"));

이렇게 직접적으로 DOM을 조작하지 않는 이유는 무엇일까?

실제 DOM에 접근하여 조작하는 대신 가상 DOM을 활용하면 불필요한 렌더링 횟수를 줄일 수 있기 때문이다.

 

 

참고자료

https://ordinary-code.tistory.com/35

https://moonsbeen.tistory.com/255

https://withseungryu.tistory.com/57