[리액트] CRA 없이 리액트 환경 구축해보기

🧑‍💻개발_Deep Dive/React

[리액트] CRA 없이 리액트 환경 구축해보기

Daisy.lee 2022. 2. 4. 20:36

강의를 듣거나 혼자 토이 프로젝트를 만들 때, 아무 생각 없이 습관적으로 CRA(Create React App)를 통해 개발을 시작하다보니 리액트가 동작하는 기본적인 원리를 지나치게 되는 것 같습니다. CRA 없이 index.html에 리액트를 적용하는 방법을 정리해보았습니다.

우선 대부분의 설정은 리액트 공식문서에 나와있으므로 공식 문서만 따라해도 잘 작동할 것입니다. 저는 제가 보기 쉽게 정리를 하고 싶어서 블로그에 적고있습니다😊

https://ko.reactjs.org/docs/add-react-to-a-website.html

웹사이트에 React 추가 – React

A JavaScript library for building user interfaces

ko.reactjs.org

1. <body> 태그 안에 비어있는 <div> 태그 하나 만들기

작성한 컴포넌트들이 보여질 비어있는 태그를 하나 만듭니다. 이때 <div>태그에 id를 부여해줍니다. id를 부여하는 이유는 자바스크립트가 id를 통해 해당 <div> 태그를 찾아서 그 안에 React 컴포넌트를 표시할 수 있게 하기 위해서입니다. id 이름은 어떻게 지어도 상관없습니다.

2. 리액트를 실행하는 <script> 태그 추가하기

<body> 태그 안에 다음과 같은 <script> 태그 2개를 삽입합니다. 해당 코드는 공식 문서에 나와있고, 공식 문서에는 아까 만든 <div> 태그 위에 위치하고 있어서 그대로 복붙했습니다.

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

3. 바벨을 실행하는 <script> 태그 추가하기

리액트에서는 JSX라는 자바스크립트 확장 문법을 사용합니다. JSX는 html의 태그와 자바스크립트의 표현식(값으로 평가될 수 있는 구문)을 같이 사용하는 문법입니다. (링크) 그런데 자바스크립트는 JSX를 해석할 수 없습니다. 그래서 바벨(babel) 이라는 컴파일러로 JSX를 해석해 자바스크립트 언어로 재작성해줍니다. 바벨을 사용하기 위해서는 위와 같이 <script> 태그로 추가하는 방법이 있습니다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

바벨을 사용하는 <script> 태그를 추가하고 나서, html 파일에서 자바스크립트를 작성하는 것처럼 <script> 태그 안에서 실제로 코딩을 하면 됩니다. 그 전에, 실제 자바스크립트 코드가 들어가는<script> 태그에 다음과 같이 type 속성을 설정해주어야 합니다.

<script type="text/babel">

4. <div> 태그를 찾는 코드와 ReactDOM 함수를 실행할 코드 넣기

리액트의 컴포넌트를 작성하는 <script> 태그 맨 아래에 리액트를 작동시키는 코드 두 줄을 작성합니다. 하나는 <body> 태그 최상단에 id를 부여한 컨테이너 <div> 태그를 찾는 코드이고, 다른 하나는 리액트의 특징인 Virtual DOM을 생성하는 함수를 실행하는 코드입니다. 리액트의 Virtual DOM과 작동 방식은 이 글에 자세하고 정확하게 설명되어 있습니다.

const 여기다가그려 = document.querySelector("#아이디 이름");
ReactDOM.render(컴포넌트를, 여기다가그려);

document.querySelector 라는 API를 통해 <div> 태그의 id를 찾고, ReactDOM.render 라는 리액트 함수를 호출합니다. ReactDOM.render 함수는 첫 번째 parameter로 렌더링할 컴포넌트들을 담고 있는 최상위 부모 컴포넌트를 받고, 두 번째 parameter로 <body> 태그 안에 있는 컨테이너 <div> 태그를 정의한 변수를 받습니다. 이를 통해 리액트의 작동 방식에 따라 작성한 컴포넌트를 화면에 그려줍니다.

저작자표시 비영리 변경금지

'🧑‍💻개발_Deep Dive > React' 카테고리의 다른 글

antd에 styled-components 간단 적용 (0)	2022.02.08
[리액트] 컴포넌트와 props ~ 상태 끌어올리기 (0)	2022.02.03
[리액트]styled-components (0)	2021.12.26

현재글[리액트] CRA 없이 리액트 환경 구축해보기

다양한 형태의 기록을 좋아합니다. (더이상 블로그를 운영하지 않지만 약 4개월동안 IT 서비스 기획을 배운 내용을 아카이빙하기 위해 남겨두었습니다.😊)

Today :
Yesterday :

daisylee