[Web] React 설치 및 내부 구조 확인하기(진입점 등등..)

 

** 2023.11.4에 다시 작성됐습니다.

 

반갑습니다!

 

이 글에서는 React 설치, 실행 하는 방법, React가 어떻게 화면을 그리고 있는지 확인하겠습니다.

 

Node 설치하기

React는 library 입니다.

설치하기 위해서 npm을 이용해야 하는데요.

 

npm을 이용하려면 일단 Node를 설치해야 합니다.

 

https://nodejs.org/en

Node.js

 

위의 사이트로 이동해서 가장 최신버전인 LTS로 받아주세요.

2023년 11월 기준으로 20.9 버전까지 나왔네요 ㅎㅎ

 

 

React 시작하기

React를 사용하는 방법은 간단합니다.

 

1. 직접 index.html 파일을 만들고 react 설치 후 하나하나 만드는 방법
2. react에서 지원해주는 예시로 학습하기

이 글을 보러 오신분들은 첫 시작일 확률이 높으므로 2번으로 시작하겠습니다.

 

vite라는 번들러에서 제공해주는 템플릿을 사용합니다.

어떤 번들러를 사용하는지는 초기 시작에서 크게 중요하지 않습니다. 

npm create vite@latest

 

 

 

커맨드를 입력하고 선택해야 할 내용들이 있습니다.

 

project name : 직접 입력해야 합니다. 잘 모르겠다면 사진과 동일하게 만들어주세요.

framework : 여러가지가 있어서 헷갈리지만, 그냥 React를 골라주시면 됩니다.

variant : Typescript로 선택합니다. swc가 궁금하신 분들은 나중에 Next.js를 사용하시면 자연스럽게 스며들게 될 것입니다.

 

cd my-react-first-project # 내가 만들었던 project name
npm install # 패키지 설치
npm run dev # react 코드가 들어있는 파일 실행

 

패키지 설치 후 실행하면 다음과 같은 화면이 나옵니다.

 

 

 

해당 주소에 들어가면 다음과 같은 화면이 나오게 될 것입니다.

http, https를 잘 구분해주셔야 합니다. 's'가 없습니다.

 

 

설치한 리액트 버전을 확인하려면 package.json 에서 확인할 수 있습니다.

18.2 버전을 등록했네요. 앞에 있는 caret(^)은 semver와 관련되어 있으므로 지금은 무시해도 좋습니다.

 

 

실제 코드에 설치된 버전은 package-lock.json 에서 확인할 수 있고 18.2.0이 설치되었습니다.

 

진입점 확인하기

 

실행이 되는것을 확인했습니다. 그런데 이 코드는 어떻게 그려지고 있을까요?

 

우선 웹 페이지를 로드하려면 index.html 파일을 열어야 할테니 해당 파일을 확인합니다. 

 

index.html

 

화면을 보면 html 안에 태그가 굉장히 많아야 할텐데 예상과 다릅니다.

 

React는 index.html에 태그를 미리 만들어서 렌더링 하는 구조가 아닙니다. (자세히 공부하려면 SPA의 개념에 대해서 알아야 합니다)

 

<div id="root" /> 안에서 동적으로 엘리먼트를 생성해서 넣어주게 됩니다.

 

createElement를 통해서 엘리먼트를 만들지만, 이 부분은 react와 babel에서 처리해주게 됩니다. 지금은 크게 중요한 부분이 아닙니다.

https://developer.mozilla.org/ko/docs/Web/API/Document/createElement

Document.createElement() - Web API | MDN

 

실제로 chrome 개발자 도구를 통해서 확인하면, "root" 안에 모두 엘리먼트들이 생성된 것을 확인할 수 있습니다.

 

 

어디서 <div id="root" /> 안에 화면을 그리라고 명령했을까요?

 

하단의 <script> 부분의 코드를 확인합니다.

/src/main.tsx 라는 코드를 불러오고 있습니다. 여기를 확인합니다.

 

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

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

 

여기서 처음하는 분들은 코드를 이해하기 어렵습니다.

 

글 처럼 읽어보겠습니다.

 

• ReactDOM.createRoot(document.getElementById('root'))
  
  • 엘리먼트를 동적으로 생성해서 넣을건데 root를 지정할게. (createRoot)
  • index.html에 있던 id="root" 를 가진 엘리먼트가 그 기준이야. (getElementById('root'))
• render( <App />)
  • createRoot를 호출하면 render(children), unmount() 를 가진 object를 반환합니다. 따라서 render를 호출할 수 있습니다.
  • root를 지정했으니, 그 안에 <App /> 이라는 컴포넌트를 그릴거야.

정리하면 'index.html'에 있던 <div id="root" /> 를 앞으로 엘리먼트를 그릴 기준으로 정하고, 그 안에서 <App /> 이라는 컴포넌트를 렌더링 하면서 시작하겠다는 뜻 입니다.

 

그러면 <div id="root" /> 안에 들어있던 많은 코드가 <App /> 에 있을것 같다고 추측이 됩니다.

 

App.tsx

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div>
        <a href="https://vitejs.dev" target="_blank">
          <img src={viteLogo} className="logo" alt="Vite logo" />
        </a>
        <a href="https://react.dev" target="_blank">
          <img src={reactLogo} className="logo react" alt="React logo" />
        </a>
      </div>
      <h1>Vite + React</h1>
      <div className="card">
        <button onClick={() => setCount((count) => count + 1)}>
          count is {count}
        </button>
        <p>
          Edit <code>src/App.tsx</code> and save to test HMR
        </p>
      </div>
      <p className="read-the-docs">
        Click on the Vite and React logos to learn more
      </p>
    </>
  )
}

export default App

 

<h1> 안에 Vite + React 같은 내용들이 있습니다.

아! 이곳에서 만들어지고 있었구나. 라고 생각할 수 있습니다.

 

마무리

리액트를 설치하고 진입점을 알아봤습니다.

 

진입점은 최대한 풀어서 설명했지만, 이해가 어려우신 분들이 많을것이라 생각합니다.

 

webpack은 들어봤는데 vite은 뭐지? 번들러는 뭐지?

createElement는 어디있는거지? tsx 파일은 뭐지? js파일 안에서 <div> 같은 태그를 원래 사용할 수 있었나? 

 

이런 내용들은 하나하나 천천히 이해하는것이 좋습니다.

 

리액트는 10년이 넘게 발전되어 온 라이브러리 입니다. 그에 맞춰 주변 라이브러리도 많이 발전 되었구요.

 

이걸 하루만에 낼름 하시려고 하면 안됩니다! 

천천히 꾸준히 달립시다! 화이팅!

 

자세한 내용들을 다룬 글도 있으니, 1년후에 다시 돌아와서 이런곳도 확인해주세요~

 

https://rbals0445.tistory.com/category/WEB/%EA%B9%8A%EA%B2%8C%20%EA%B3%B5%EB%B6%80%ED%95%98%EA%B8%B0

'WEB/깊게 공부하기' 카테고리의 글 목록

 

감사합니다