🤿 딥다이브 - 리액트에서는 어떻게 Element를 추가할까? innerHTML?

정혜인·2024년 9월 23일

React js 딥다이브 웹 프론트

딥다이브

목록 보기

2/4

🤔 vanillajs에서 Element를 추가하는 방식에 대한 고민

바닐라 JS로 SSR과 CSR을 구현해보면서 innerHTML을 쓰지 않기 위해 react에서 Element를 추가하는 방식에 대해 학습했던 과정을 작성하려 합니다.

저번 포스팅에서와 유사하게, 바닐라 js로의 웹 페이지 구현은 처음이라 많이 낯설기도 하고, 어렵기도 한 것 같습니다.

😣 1. 바닐라 js에서 innerHTML

저번 포스팅에서 작성했던 것처럼, CSR과 SSR에 대해 깊이 고민하고 학습해보았고, 바닐라 JS로 CSR과 SSR을 구현해보는 과정을 거쳤습니다.

그런데 CSR로 구현할 때 데이터를 받아서 화면에 그려주는 과정에서 어쩔 수 없이 innerHTML로 돔에 접근해 엘리먼트를 추가해야 했습니다.

하지만 항상 react를 사용했던 사람으로서, ‘innerHTML 은 쓰지 말아야 한다’는 생각이 지배적이라 쓰면서도 찝찝함을 감출 수 없었습니다.

😖 2. `innerHTML`을 사용한 CSR, 그리고 보안 문제

‘innerHTML 은 쓰지 말아야 한다’는 생각 때문에 고민이 많았습니다. 주입된 값이 악성 스크립트를 포함할 경우 이를 그대로 실행하게 되는 보안 문제가 있기 때문에 innerHTML 사용을 지양해야 하는데, 생각해보니 React로 프로젝트를 할 때는 innerHTML을 전혀 사용한 적이 없다는 사실을 깨달았습니다.

그럼 React에서는 어떻게 돔에 접근해 엘리먼트를 추가하는지 궁금해졌습니다.

React 내부에서는 innerHTML을 사용하는 걸까? 만약 사용하지 않는다면 어떻게 엘리먼트를 추가하는 것일까?

이 궁금증을 해결하기 위해 React의 동작 방식을 조금 더 깊이 살펴보기로 했습니다.

🔍 3. React는 `innerHTML`을 쓸까?

만약 React가 내부적으로 innerHTML을 사용하고 있다면, 저도 바닐라 JS에서 innerHTML을 써도 되지 않을까 하는 생각이 들었고, 만약 React가 다른 방법을 사용한다면, 그 방식이 무엇인지 알아내야겠다는 생각을 하였습니다.

우선 결론부터 말하자면 React 내부에 대한 공부를 해보니, React는 innerHTML을 사용하지 않습니다. 그렇다면 React는 어떻게 엘리먼트를 추가하는 것인지 궁금해졌고, 확인하기 위해서 코드가 어떻게 동작하는지부터 살펴보았습니다 .

⚙️ 4. JSX, Babel과 `createElement()`

우선 React에서는 JSX라는 독특한(?) 문법을 사용합니다.

간단하게만 언급하자면 JSX는 HTML과 매우 비슷한 문법이고, React 컴포넌트를 직관적으로 작성할 수 있게 도와줍니다.

하지만 JSX는 브라우저에서 바로 이해되지 않으므로, Babel이라는 도구가 이 코드를 transform하여 자바스크립트 코드로 변환해줍니다. (JSX 관련 학습은 따로 정리해둘 예정입니다.)

예를 들어 다음과 같은 JSX 코드를 작성했다고 가정해보겠습니다.

<div id="app">
  <h1>Hello, World!</h1>
  <button onClick={() => alert('Clicked!')}>Click me</button>
</div>

위 코드에 대해서 Babel은 아래와 같은 형태로 변환해줍니다.

const element = createElement(
  'div',
  { id: 'app' },
  createElement('h1', null, 'Hello, World!'),
  createElement(
    'button',
    { onClick: () => alert('Clicked!') },
    'Click me'
  )
);

위 코드에서 React.createElement() 함수를 확인할 수 있습니다. 이 함수는 JSX 코드를 자바스크립트 코드로 변환하는 역할을 합니다.

react를 사용하는 개발자들은 보통 jsx 형태로 코드를 작성하기 때문에, createElement 함수를 사용할 일이 거의 없어 이번 기회에 처음 학습하게 되었습니다.

🛠 5. `createElement`의 내부에서 React Element 생성

React의 createElement 함수는 JSX로 작성된 코드를 바탕으로 Element를 생성합니다. createElement의 코드를 보면, 다음과 같이 props와 children(자식 요소)을 설정한 후, 이를 바탕으로 ReactElement라는 객체를 반환하는 과정을 볼 수 있습니다.

export function createElement(type, config, children) {
  let propName;
  
  props[propName] = config[propName];
  
  key = '' + config.key;
  
  props.children = children;
  
  return ReactElement(
    type,
    key,
    ref,
    self,
    source,
    ReactCurrentOwner.current,
    props,
  );
}

이 createElement 함수에서 특이한(?) 점은 ReactElement라는 객체를 반환한다는 것입니다.

일반적인 DOM 엘리먼트를 반환하는 것이 아니라, React만의 독특한 엘리먼트 구조를 사용하는 것입니다.

function ReactElement(type, key, ref, self, source, owner, props) {
 const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type: type,
    key: key,
    ref: ref,
    props: props,
    _owner: owner,
  };
  
  return element;
}

여기서 ReactElement는 실제 DOM 엘리먼트가 아닌, React에서 사용하는 가상 DOM에 해당합니다.

(물론 공식 문서에서는 가상 DOM이라고 콕 집어 언급하지는 않습니다.)

🙄 6. 그럼 DOM에는 언제, 어떻게 반영되지?

createElement 함수를 통해 ReactElement를 생성한다는 것까지는 알겠는데 그렇다면 실제 DOM에는 언제 입히는 것인지 또 궁금해졌습니다.

지금까지의 과정을 거치면 생성만 하고 html에 입히는 과정은 없다고 느껴졌기 때문입니다.

결론적으로는 이 ReactElement 객체는 React의 렌더링 과정에서 처리되어 마지막에 실제 DOM에 반영되는 것인데, 이 문장을 이해하기 위해 react-dom을 공부해보아야 했습니다.

위에서 만들어진 ReactElement 같은 것들을 html과 연결해주어야 하는 것인데, 이때 사용되는 것이 바로 react-dom 인 것입니다.

먼저 react를 통해 개발하면, 사용자에게 보여지는 결론적인 화면은 index.html 파일입니다.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.svg" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <title>App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>

이 html 파일에서 유일하게 div 태그가 하나 있기 때문에, (심지어 안에는 아무 컨텐츠도 존재하지 않습니다)

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

이 div 구조 내에 위에서 만들어두었던 ReactElement 가 들어가게 되는 것입니다.

react를 사용해봤다면 모두가 알다시피, 아래와 같은 index.js 파일이 존재합니다.

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './app';

ReactDOM.render(
  	<App />,
  	document.getElementById('root')
);

이 index.js 파일에서 document.getElementById('root') 코드는 위 index.html 파일의 유일한 div 태크를 가리키는 것이고, root 라는 id를 이용해서 react-dom 으로 js 코드와 연결해주는 것입니다.

자세한 과정을 적어보자면,

import ReactDOM from 'react-dom';

react-dom이라는 라이브러리에서 React라는 클래스를 import 해오고,

ReactDOM.render(
	<App />,
	document.getElementById('root')
 )

가져온 라이브러리의 ReactDOM이라는 클래스에 있는 render 함수를 이용해서

즉, index.html에 있는 <div id="root"></div> 유일한 div 태그에 <App /> 이라는 컴포넌트(js 파일)를 연결하는 것입니다.

🙄 7. jsx —(babel)—> createElement() → ReactElement —(react-dom)—> 렌더링

위에 작성했던 전체 흐름을 간단하게 작성해보자면,

💡 간편하게 jsx로 구현한 코드를 babel 이 createElement() 함수로 변환해주고, 이 createElement() 함수를 거치면 ReactElement라는 타입으로 반환해줍니다. 이렇게 반환된 Element들은 react-dom을 통해 index.html에 있는 태그에 접근하여 <App />과 같은 컴포넌트와 연결해주어 html 코드인 것처럼 CSR 방식으로 화면에 렌더링 해줍니다.

코드로 정리해보자면 아래와 같습니다.

App.jsx 파일이 아래와 같다면,

// App.jsx
import React from 'react';
import from './app.css';

function App() {
  return (
  <div id="app">
	  <h1>Hello, World!</h1>
	  <button onClick={() => alert('Clicked!')}>Click me</button>
	</div>
  )
}  

export default App;

babel을 통해

const element = createElement(
  'div',
  { id: 'app' },
  createElement('h1', null, 'Hello, World!'),
  createElement(
    'button',
    { onClick: () => alert('Clicked!') },
    'Click me'
  )
);