React의 기본 원리

2023-03-17

안녕하세요.

이번 시간에는 React의 기본 원리에 대해서 알아보겠습니다.

React 란 무엇인가?

React는 Facebook에서 개발한 UI 라이브러리입니다.

React는 컴포넌트 기반으로 개발을 진행합니다. 컴포넌트는 HTML을 반환하는 함수입니다. 컴포넌트를 사용하면 UI를 효율적으로 관리할 수 있습니다. 컴포넌트를 사용하면 재사용이 가능하고 유지보수가 쉽습니다.

React는 Virtual DOM을 사용합니다. Virtual DOM은 메모리에 가상의 DOM을 생성합니다. Virtual DOM은 데이터가 변경되면 이전 Virtual DOM과 비교해서 변경된 부분만 실제 DOM에 반영합니다. 이렇게 하면 DOM에 변화가 발생할 때마다 전체 DOM을 다시 그리는 것이 아니라 변경된 부분만 다시 그리기 때문에 성능이 향상됩니다.

React는 JSX를 사용합니다. JSX는 JavaScript와 HTML을 조합한 문법입니다. JSX는 React.createElement() 함수를 사용해서 JavaScript 객체로 변환합니다. JSX는 React에서 사용하는 문법이지 JavaScript에서 사용하는 문법이 아닙니다.

React의 기본 원리

React의 기본 원리는 선택된 DOM에 새로운 DOM을 생성해서 추가하는 것입니다.

일반 자바스크립트 코드를 사용해서 React의 기본 기능을 구현해보겠습니다.

<DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script>
    const rootElement = document.getElementById('root');
    const element = document.createElement('h1');
    element.textContent = 'Hello World';
    rootElement.appendChild(element);
  </script>
</body>
</html>

위 코드는 일반 자바스크립트 코드로 React의 기본 기능을 구현한 코드입니다. 위 코드는 h1 태그를 생성해서 Hello World라는 텍스트를 넣고 rootElement에 추가한 것입니다.

이번에는 React CDN 코드를 삽입해서 위의 코드를 React 문법을 사용해서 동일하게 구현해보겠습니다.

<DOCTYPE html>
<html lang="en">
<body>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <div id="root"></div>
  <script>
    const rootElement = document.getElementById('root');
    // const element = document.createElement('h1');
    // element.textContent = 'Hello World';
    const element = React.createElement("h1", {children: "Hello World"});
    // rootElement.appendChild(element);
    ReactDOM.render(element, rootElement);
  </script>
</body>
</html>

위와 같이 React의 기본 원리에 대해서 알아보았습니다.

감사합니다.

< 목록으로 돌아가기