/
/

React 설치와 사용이유

nodejsReactnpmnpxjsxComponents리액트
avatar
전상욱
2025.04.10
·
5 min read

설치

Node.js란?

  • Chorme V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다.

  • 노드 환경에서 자바스크립트 혹은 타입스크립트로 돌아가는 서버 또는 CLI 프로그램 등을 만들 수 있다.

Node.js 설치

Node.js 공식사이트

4938

NPM이란?

  • Node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램

  • yarn도 같은 역할을 한다.

  • 노드를 설치하면 같이 설치된다.

React설치

npm을 이용한 방법

  • npm install -g create-react-app 입력 -> 설치

  • create-react-app -V 입력 -> 버전 확인 (설치 확인)

npx를 이용한 방법 (권장)

  • npx create-react-app

npm과 npx의 차이

npm은 설치하는 프로그램이고, npx는 임시로 설치해서 실행 후 지워지는 프로그램이다.

심플 웹앱 실행

  • 터미널에서 npm start 입력 (VS 코드 사용)

  • ctrl + c : 실행 종료

디렉토리 구조 파악

JS

  • public : index.html
    react실행 시 나오는 첫 화면
    컴포넌트가 <div id="root"></div> 태그 안으로 들어간다.

  • src : index.js
    document.getElementById('root')를 통하여 index.html에 진입
    <App /> : 리액트를 통해 만든 사용자 정의 태그 (컴포넌트)
    import App from './App' : App 컴포넌트를 불러온다 (App.js)

  • src : App.js
    App 컴포넌트로 실제 구현한 파일

CSS

  • import './App.css' : CSS파일 불러오기

배포

  • 터미널에 npm run build 입력 -> 디렉토리에 build 파일 생성

  • 공백과 같은 불필요한 내용이 없어진다. -> 용량이 줄어든다.


사용이유

리액트의 특징

1. JSX

JSX는 javascript + xml로 자바스크립트의 확장 구문이다.
이 문법은 Element(요소)를 리액트에서 제공해주기에 마크업 코드처럼 작성 할 수 있다.

import React from 'react';
const HelloWorld = () => {
  return <div>Hello World!</div>;
}
export default HelloWorld;

  • 이런식으로 HTML 태그처럼 적을 수 있기에 굉장히 편하다.

2. Component

컴포넌트는 UI를 구성하는 개별적인 뷰의 단위이다.
컴포넌트의 특징은 재사용성이다.

리액트의 장점

  • 리액트는 Virtual DOM을 이용한다.
    기존의 View를 계속 바꾸는 형식으로 사용할 경우 성능 저하를 일으키기에 Virtual DOM을 이용하여 먼저 가상의 돔에서 새롭게 렌더링하여 기존의 View에 돔과 비교하여 바뀐 부분만 적용하는 방식이다.

  • Component를 이용한 효율적 재사용과 유지보수에 용이하다.
    Component는 UI(User Interface)를 구성하는 뷰의 단위로 전체 앱은 Component들이 모여서 만들어 지게 된다. 이렇게 각 UI마다의 단위이기에 다른 앱에서도 쉽게 재사용을 할 수 있다.

  • React는 JSX문법을 이용한다.
    JSX문법을 HTML과 같은 마크업 언어의 형태를 띄고 있기 때문에 비교적 쉽게 공부할 수 있는 부분도 있다.

리액트의 단점

  • 리액트는 View Only이다.
    결국 View만을 만들 수 있기에 데이터 관련 처리나 Routing 같은 경우는 또 다른 라이브러리를 이용해야하는 불편함이 있다. 이 단점은 Next.js를 사용하면 단점을 보완할 수 있다.

  • IE8 이하에서는 지원을 하지 않는다.
    2022년 6월 부터는 MS에서 IE에 지원을 종료하겠다고 하여 이 단점은 곧 없어질 예정이다.

- 컬렉션 아티클