• Feed
  • Explore
  • Ranking
/
/
    React

    React 설치와 사용이유

    nodejsReactnpmnpxjsxComponents리액트
    전
    전상욱
    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에 지원을 종료하겠다고 하여 이 단점은 곧 없어질 예정이다.

    - 컬렉션 아티클