[React] 나만의 리액트 만들기 - 1 - JSX 그리고 ReactDOM

리액트를 사용하는 어느날 

당연하게 주어진 리액트를 과연 어떻게 만들 수 있을까? 라는 생각을 했다. 

리액트라고 검색하면 많은 글이 있다.

 

결국 리액트로 자바스크립트를 기반으로 만들었기 때문에 나도 만들 수 있지 않을까? 

이 작업은 얼마나 이어질지 모르겠지만 시작되었다. 

 

리액트 홈페이지

 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라
 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.

일반적으로 상태 (State)가 변경되었을 때 우리는 다시 화면에 변경된 상태를 

토대로 그려줘야한다. 

 

이것을 리액트는 아주 쉽게 해준다. 

 

스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요.

컴포넌트 형식으로 한 화면에 나타나야할 정보를 나눠서 개발하고 이를 조합해서 

페이지를 만들어낸다. 

 

이제 페이지를 조금 더 깊게 들어가보자 

 

JSX 

리액트하면 가장 먼저 생각할 수 있는 핵심인 JSX이다. 

리액트는 컴포넌트를 사용해서 관심사를 분리해준다고 한다. 

 

음? 관심사를 분리한다는 말은 무엇일까? 

우선 관심사란 컴퓨터 프로그램 코드에 영향을 미치는 정보의 집합이다. 

예를 들자면 

최신 기술 그림판

홈페이지가 있다고 생각해보자.

헤더와 푸터, 그리고 메뉴, 서브 메뉴 마지막으로 본문 등 각각을 " 관심사 " 라고 생각하자

 

이것을 굳이 한 페이지에서 만들지 않고 나눠서 개발하면 이점이 뭘까? 

당장 생각나는 것은 재사용성이다. 그리고 코드의 단순화라고 생각한다. 

 

모든 화면의 내용이 들어있는 코드를 생각해보자.. 징글징글하지 않을까? 

 

다시 JSX로 넘어가자

React에서는 이 JSX를 사용해서 관심사를 분리한다고 한다. 

 

const img = "~~~ "

const element = <div><img src={img} /> 이미지와 있는 div</div>

JSX는 태그 자체를 받아서 Element를 만들어준다. 

그렇다면 우리가 React를 만들려면 우선 이런식으로 간단하게 Element를 만들어줄 필요가 있다. 

 

핵심 키워드 : JSX => 태그 자체를 입력받아 바로 Element를 만들어주는 기술 

 

엘리먼트 렌더링 

이번에는 화면에 어떤 방식으로 렌더링하는지 설명해주려고 하나보다. 

 

React에서의 엘리먼트는 브라우저 DOM의 엘리먼트와는 다르게 일반 객체로 

아주 간단하게 생성할 수 있다고 한다. 

 

이것을 React DOM이 React 엘리먼트와 브라우저의 DOM이 일치하게 업데이트를 하나보다

 

렌더링하기 

<div id="root"></div>

우리가 잘 아는 root Div이다. 

모든 엘리먼트를 이 노드를 통해서 React DOM이 관리하기 때문에 root DOM 이라고 부른다. 

 

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

element가 있고 이것을 ReactDOM의 createRoot의 결과물인 root 변수의 render 함수로 

렌더링을 한다.

 

자! 그럼 여기까지 공부를하고 이걸 한번 실제로 구현해보자 

 

핵심 키워드는 JSX는 태그 자체를 입력받아 바로 Element를 만들어준다. 

그리고 ReactDOM을 사용해서 root DOM을 만들고 render를 통해서 렌더링한다.

 

const CrazyReactDOM = (function () {
  let rootDom;

  return {
    createRoot(targetNode) {
      rootDom = targetNode;

      return this;
    },

    render() {
      console.log(rootDom);
    },
  };
})();

export default CrazyReactDOM;

나만의 ReactDOM의 시작을 만들었다! 빰빠밤!!

 

rootDom의 상태를 가지고 있는 싱글톤 방식으로 구현했고, createRoot을 사용하면 

rootDom에 TargetNode를 저장한다. 

 

그리고 아직은 구현 못했지만 render()를 토대로 입력받는 태그를 실제 태그로 만들어줄 것이다.

let domParser = new DOMParser();

const CrazyReactDOM = (function () {
  let rootDom;

  return {
    //...

    render(rowElement) {
      const elementChildren = domParser
        .parseFromString(rowElement, "text/html")
        .querySelector("body").children;

      if (elementChildren.length !== 1) {
        return;
      }

      const element = elementChildren[0];
      rootDom.innerHTML = element.innerHTML;
    },
  };
})();

export default CrazyReactDOM;

우선 DOMparser를 통해서 문자열을 변환시켰다. 

모든 태그와 옵션, 문자를 추출한다면 당연히 베스트겠지만 솔직히 아직 그정도 실력은 무슨 

정규 표현식의 기본도 모르는 상태이다. 

 

이제 막 시작하는데 시작부터 모든 걸 완성하진 못하겠지...

 

참고 

https://ko.reactjs.org/

React – 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

https://ko.wikipedia.org/wiki/%EA%B4%80%EC%8B%AC%EC%82%AC_%EB%B6%84%EB%A6%AC

관심사 분리 - 위키백과, 우리 모두의 백과사전

 

깃허브

https://github.com/SeoJaeWan/Crazy-React/pull/1

feature: createRoot과 render 작업 by SeoJaeWan · Pull Request #1 · SeoJaeWan/Crazy-React