main-logo

React 입문: 설치과정과 기본구조 살펴보기

React 시작의 가장 기초적인 내용들을 다룹니다

profile
jinah
2022년 08월 18일 · 0 분 소요

들어가며

React는 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다.
이번 포스팅에서는 (저를 포함해) 프론트엔드 개발에 첫발을 내딛고자 하는 분들이라면 가장 처음 찾아보게 되는 기본 입문지식, 간단한 설치 방법과 구조를 소개해드리도록 하겠습니다.

설치를 위해서 필요한 것 (Node.js, IDE)

Node.js

React 프로젝트를 만들기 위해서 Node.js와 npm을 설치해야 합니다. Node.js란 브라우저 밖의 javascript. 즉, 브라우저에 내장되어있는 자바스크립트를 웹브라우저 환경이 아닌 곳에서도 사용하여 연산할 수 있게 하는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임입니다. React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다. 이때 사용되는 개발도구는 바벨, 웹팩 등이 있습니다.

IDE

통합 개발 환경(Integrated Development Environment, IDE)의 뜻으로 개발 시 사용되는 툴을 말합니다. 저는 주로 Visual Studio Code로 사용하고 있으며, 사용하는 IDE가 따로 있다면 그것으로 사용해도 됩니다.

Create React App 을 이용해서 React 설치하기

React 앱을 만들 폴더를 생성합니다.
해당 폴더 경로로 터미널을 실행합니다.
npx create-react-app ./

// React설치
npx create-react-app ./
// 잘 설치된 React 확인 후
npm start
  • npx란? 노드 패키지 실행을 도와주는 도구입니다. 그래서 create-react-app이라는 npm registry에 있는 패키지를 create-react-app 폴더에서 실행해서 React를 설치해줍니다.

reactstart.jpg

 


설치 완료 후 실행되면 위와 같이 브라우저 화면이 뜨게 됩니다. 참 간단하죠? :) 이제는 설치된 React의 기본 구조에 대해서 알아보겠습니다.


Create React App으로 실행된 기본구조 살펴보기

 

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg
  • 이름이 수정되면 안 되는 파일들
    public/index.html ->페이지 템플릿, src/index.js -> 자바스크립트 시작점

node_modules

React에 필요한 모듈들이 npm 명령어로 설치되어 저장되는 곳입니다.

Package.json

프로젝트에 설치된 모듈들 버전과 이름들이 작성되어 있습니다.

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

└ 필요한 라이브러리와 라이브러리의 버전들이 명시되어 있습니다.

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

└ React 앱 실행, 빌드, 테스트 등의 스크립트가 명시되어 있습니다. 프로젝트에서 자주 실행해야 하는 명령어를 scripts로 작성해두면 npm명령어로 실행할 수 있습니다.

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

└ 소스 코드를 입력할 때 문법이나 코드 포맷을 체크해주는 것에 대한 설정을 명시해줍니다.

src 폴더

대부분의 React 소스 코드들은 이곳에 작성하며 보통 우리가 가장 많이 작업하는 파일들이 모아져 있습니다 (css, js)

src/index.js (최초 진입시 불려지는 파일)

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

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

root.render(컴포넌트, 위치)
첫 번째 인자에는 일반적인 HTML의 태그처럼 생긴 Component 들을 ‘root’라는 id를 가진 element에 띄워 달라는 의미입니다.
React.StrictMode
StrictMode는 애플리케이션 내의 잠재적인 문제를 알아내기 위한 도구입니다. Fragment와 같이 UI를 렌더링하지 않으며, 자손들에 대한 부가적인 검사와 경고를 활성화합니다. Strict 모드는 개발 모드에서만 활성화되기 때문에, 프로덕션 빌드에는 영향을 끼치지 않습니다.
App
App.js에서 만든 Component를 띄웁니다.

src/App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App이라는 class의 컴포넌트 입니다. class=”App”은 return안의 html 태그를 렌더링 합니다.

마치며

막연하게 Vue를 사용하여 프로젝트를 했을때 자동으로 만들어져 있는 파일들을 하나하나 살펴보기보다는 대충 ‘어떠한 역할을 하는 무언가’ 정도로 이해하고 작업을 했었던 기억이 있습니다. 그래서 잠시라도 공백이 생기면(ex:휴직 등) 금방 잊고 처음부터 다시 반복해야 했었던 것 같습니다. 하여, 이번 React 공부를 시작할 때는 급하지 않게 대충이 아닌 천천히 하나하나 이해하고 넘어가기로 마음먹었습니다. 저와 같은 프론트엔드 개발 입문자들에게도 도움이 되었기를 바랍니다.

※ 공부하며 이렇게 블로그로 정리해보니 좋네요!
앞으로도 공부하며 조금씩 심화한 내용의 React 포스팅으로 찾아뵙도록 하겠습니다 :)