05. 리액트 기본 작동원리

2019. 12. 11. 00:15

지금까지 리액트에 대한 소개와 리액트를 시작하기 위한 기본적인 준비에 대해서 설명드렸습니다.

그렇다면 이제부터 본격적으로 리액트를 사용하는 방법에 대해서 알아보도록 하겠습니다.

리액트를 사용하여 어플리케이션을 작성하는 기본 작동 원리를 설명한 후, 모든 설정을 자동으로 수행해주는 Create-React-App을 사용하여 어플리케이션의 기본 구조를 설정하는 방법을 학습할 것입니다.

앞에서 리액트는 “사용자 인터페이스를 만들기 위한 JavaScript 라이브러리”라고 하였습니다.

따라서, 리액트는 대표적인 자바스크립트 라이브러리인 JQuery를 적용하는 방법과 마찬가지의 방법으로 HTML 문서에 적용할 수 있습니다.

HTML 문서에 리액트 적용하기

웹 페이지에서 JQuery를 사용할 때는 JQuery의 기능이 작성되어 있는 js 파일을 HTML 문서에 <script></script> 태그를 사용하여 삽입합니다.

마찬가지로 리액트의 기능이 작성되어 있는 js 파일을 HTML 문서에 삽입하는 방식으로 리액트를 사용하게 됩니다.

예시 코드를 살펴보도록 하겠습니다.

<!-- index.html -->
<html>
  <head>
    <title>리액트 샘플</title>
  </head>
  <body>
  …
  <!-- 리액트 기능이 작성된 js 파일을 HTML 문서에 삽입 -->
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  …
  </body>
</html>

react.development.js 파일은 플랫폼(웹, 스마트폰 어플, 응용프로그램 등) 공통으로 사용되는 리액트의 기능이 포함되고 있고, react-dom.development.js 파일은 웹에서 사용되는 리액트의 기능이 포함되어 있습니다.

다른 플랫폼을 위한 코드(리액트 네이티브, 일렉트론 등) 작성 시 에는 다른 파일을 사용하게 됩니다.

development 파일은 개발 중 사용하는 파일로 경고와 오류 메시지를 콘솔에 표시하여줍니다.

실제 배포시에는 product 파일을 사용하여야 합니다.

리액트 기본 작동원리 알아보기

지금부터 설명드릴 내용은 작성하기가 번거롭고 비효율적이기 때문에, 앞으로 여러분이 실제 리액트 코드를 작성할 때에는 사용하지 않는 방법입니다.

실제로는 더 간편한 문법(JSX)으로 코드를 작성하면 자동으로 지금 설명드리는 방식의 코드로 변환시키는 방식(babel 사용)을 사용하게 됩니다.

그렇지만, 리액트의 동작 원리를 이해하기 위하여 알고 있어야하는 내용이기 때문에 집중해서 학습해주시기 바랍니다.

먼저 코드를 살펴보겠습니다.

<!-- index.html -->
<html>
  <head>
    <title>리액트 샘플</title>
  </head>
  <body>
    <!--작성한 리액트 컴포넌트가 표시될 기준 위치가 될 요소 추가 -->
    <div id="app"></div>
    <!-- 리액트 기능이 작성된 js 파일을 HTML 문서에 삽입 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <!-- App.js 파일에 작성된 리액트 컴포넌트를 문서에 삽입(실행) -->
    <script src="./App.js"></script>
  </body>
</html>

앞의 "HTML 문서에 리액트 적용하기"에서 리액트 파일 삽입 코드를 통해서 리액트의 기능이 포함되어 있는 js 파일을 HTML 문서에 삽입하였습니다.

따라서, 추가된 아래의 코드를 통해서 문서에 삽입(실행)하는 App.js 파일에 작성된 리액트 코드가 올바르게 해석되어 화면에 표시될 수 있습니다.

<script src="./App.js"></script>

그렇다면 App.js 파일에는 어떤 내용이 작성되어 있을까요? 살펴보겠습니다.

/* App.js */
function App() {
  return React.createElement(
    "div",
    {
      style: {
        color: "grey",
        border: "2px solid peru",
        borderRadius: "4px",
        padding: "10px"
      }
    },
    "리액트 샘플 예제입니다."
  );
}

const domContainer = document.getElementById("app");
ReactDOM.render(App(), domContainer);

여기서부터 처음 보는 코드들이 등장하게 됩니다.

하지만 너무 걱정하거나 어려워하지 않으셔도 됩니다. 제가 차근차근 설명해드리겠습니다!

아마도 React.createElement와 ReactDOM.render 이 두 가지가 여러분이 처음 보는 코드일 것이라 생각됩니다.

이 두 가지는 리액트의 핵심이 되는 요소입니다.

앞서 설명한 것처럼 가시성이 좋지 않고 비효율적이기 때문에 리액트 어플리케이션을 작성하면서 이 두 가지를 직접 작성하는 경우는 거의 없습니다.

뒤에서 설명해줄 JSX 문법을 사용할 것이기 때문입니다.

JSX라는 가시성 좋고 작성하기 쉬운 문법으로 화면을 나타낼 코드를 작성하고 babel이라는 것을 사용하여 그것이 자동적으로 React.createElement를 사용한 코드로 바뀌어지도록 하는 방법을 사용하게 됩니다.

또한, ReactDOM.render는 일반적인 경우 한번만 사용하게 됩니다.

앞서 말씀드린 것처럼 React.createElement와 ReactDOM.render를 직접 작성하는 경우는 거의 없지만 원리를 이해하는 것은 필요하므로 여기에서 설명을 하고 넘어가겠습니다.

1. React.createElement

React.createElement(component, props, ...children)는 전달된 파라미터를 사용하여 리액트 DOM 요소를 만들어 반환(return)해주는 함수입니다.

리액트 DOM 요소는 HTML의 DOM 요소와 유사한 역할을 하며, 리액트에서 화면을 나타내기 위해 사용되는 요소입니다.

쉽게 이해하려면 HTML의 태그와 같은 것을 리액트가 만들어서 사용한다고 생각하면 되겠습니다. 이해가 되시나요?

이제 React.createElement의 각 파라미터에 대해서 알아보겠습니다.

- component
: 리액트 DOM 요소로 변환할 대상을 입력, 작성한 리액트 컴포넌트명 또는 HTML 태그명을 입력

- props

: component에 리액트 컴포넌트명을 입력한 경우 해당 컴포넌트에 전달할 데이터(props)를 입력

component에 HTML 태그명을 입력한 경우 해당 태그에 적용할 속성을 입력

객체({ }) 형식으로 작성해야함

- children

: 리액트 DOM 요소를 전달하는 경우 component에 입력한 내용에 의하여 생성되는 리액트 DOM 요소 하위의 자식 요소로 추가됨

문자열을 입력한 경우 생성되는 리액트 DOM 요소 내부에 텍스트로 추가됨

설명이 약간 어렵죠? 코드를 보면서 자세히 설명 드리겠습니다.

/* App.js */
function App() {
  return React.createElement(
    "div",
    {
      style: {
        color: "grey",
        border: "2px solid peru",
        borderRadius: "4px",
        padding: "10px"
      }
    },
    " 리액트 샘플 예제입니다."
  );
}
…

가장 먼저 function App이 보입니다.

App이라는 이름의 함수입니다.

리액트에서는 함수를 사용하여 작성한 컴포넌트를 함수형 컴포넌트라고 부르며, 이름의 첫 글자를 대문자로 작성합니다.

함수를 사용하여 작성한 컴포넌트라는 것은, 해당 함수가 컴포넌트라는 의미이며, 따라서 함수의 이름이 컴포넌트의 이름이 됩니다.(클래스를 사용하여 작성한 컴포넌트는 클래스형 컴포넌트라고 하며, 책의 이후 내용에서 설명합니다.)

함수형 컴포넌트의 가장 큰 특징은 리액트 DOM 요소를 return해야 한다는 것입니다.

위의 코드에서도 App 컴포넌트는 React.createElement()를 리턴하고 하고 있습니다.

앞에서 React.createElement가 리액트 DOM 요소를 return 해준다고 했죠?

따라서, App 컴포넌트는 결과적으로 리액트 DOM 요소를 return 해주게 됩니다.

여기까지 잘 이해하셨나요?

이제 작성된 React.createElement 코드를 살펴보겠습니다. 먼저 첫번째 파라미터는”div”입니다.

앞의 설명 중 HTML 태그명을 입력한 경우가 되겠네요.

React.createElement는 <div></div> 라는 DOM 요소를 반환하게 됩니다.

두번째 파라미터는 객체로 되어 있고 객체의 첫번째 요소는 style입니다.

첫번째 파라미터로 HTML 태그명을 입력한 경우, 두번째 파라미터는 해당 태그에 적용할 속성을 객체로 전달한다고 했죠?

따라서 <div></div>에 해당 속성이 적용되게 되어 <div style = “color: grey; border: 2px solid peru; border-radius: 4px; padding: 10px;”></div> 라는 DOM 요소가 만들어 지는 것입니다.

가만히 보면, 분명히 두번째 파라미터에서는 borderRadius였는데, 속성이 적용될 때는 border-radius로 적용되는 걸 볼 수 있습니다.

JavaScript에서는 이름에 하이픈(-)을 사용할 수 없기 때문에, style의 경우 하이픈이 들어갈 자리 뒤의 문자를 대문자로 변경해서 작성을 하면 실제로 적용할 때에는 대문자를 하이픈(-)+소문자로 바꾸어서 적용을 하도록 되어있기 때문입니다.

마지막으로 세번째 파라미터는 “리액트를 사용하는 첫번째 방법”입니다.

문자열을 입력한 경우 리액트 DOM 요소 내부에 텍스트로 추가된다고 했으니, 최종 생성되는 결과물은 <div style = “color: grey; border: 2px solid peru; border-radius: 4px; padding: 10px;”>리액트 샘플 예제입니다.</div> 이렇게 됩니다.

이제 이해하셨겠지요? 다음으로 ReactDOM.render에 대해서 알아보겠습니다.

2. ReactDOM.render

ReactDOM.render(리액트 DOM 요소, HTML DOM 요소)는 리액트 DOM 요소를 실제 화면에 렌더링(표시)하도록 해주는 함수입니다.

첫번째 파라미터로 전달되는 리액트 DOM 요소를 두번째 파라미터인 HTML DOM 요소의 하위에 렌더링 하도록 해줍니다.(HTML DOM 요소의 기존의 하위 내용은 모두 제거)

<!-- index.html -->
…
<body>
  <!--작성한 리액트 컴포넌트가 표시될 기준 위치가 될 요소 추가 -->
<div id="app"></div>
…
</html>

/* App.js */
…
const domContainer = document.getElementById("app");
ReactDOM.render(App(), domContainer);

다시 위의 코드를 살펴 보겠습니다.

const domContainer = document.getElementById("app")을 사용하여 <div id="app"></div>라는 HTML DOM 요소를 선택하여 domContainer 변수에 넣었습니다.

그리고 ReactDOM.render(App(), domContainer)와 같이 ReactDOM.render 함수를 사용하였습니다.

첫번째 파라미터인 App()는 App 함수를 실행한 반환 값으로 <div style = “color: grey; border: 2px solid peru; border-radius: 4px; padding: 10px;”>리액트 샘플 예제입니다.</div>라는 리액트 DOM 요소 입니다.

이것을 ReactDOM.render 함수가 두번째 파라미터인 domContainer 변수, 즉 <div id="app"></div>라는 HTML DOM 요소 하위에 렌더링 시켜줍니다.

따라서 최종적으로 리액트로 작성한 App.js 파일의 코드가 적용된 결과는 아래와 같습니다.

<html>
  <head>
    <title>리액트 샘플</title>
  </head>
  <body>
    <div id="app">
      <div style="color: grey; border: 2px solid peru; border-radius: 4px; padding: 10px;">
        리액트 샘플 예제입니다.
      </div>
    </div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="./App.js"></script>
  </body>
</html>
(주석 코드 생략)

실행한 화면은 아래와 같습니다.

정말로 그런지 크롬 개발자 도구(ctrl+shift+i)를 사용하여 확인해 볼까요?

제가 설명한 내용과 동일한 결과임을 확인할 수 있습니다.

지금까지 살펴본 내용이 바로 리액트가 기본적으로 동작하는 방식입니다.

가장 기본적인 내용이니 암기하지는 않더라도, 꼭 이해하고 다음의 내용을 학습하였으면 좋겠습니다.

저작자표시 비영리 변경금지 (새창열림)

'리액트(React) > 리액트 기초' 카테고리의 다른 글

04. NPM 사용방법 (0)	2019.11.20
03. 리액트 준비하기 (0)	2019.11.19
02. 모두의 리액트 (0)	2019.11.19
01. 리액트(React) 알아보기 (0)	2019.11.19

Intuitioner.js