[새싹x코딩온] 웹 퍼블리싱 과정 11주차 - 2 | React - 시작하기, npm

React

Virtual Dom

• 부드럽고 빠르다.
• 변경되는 부분만 최소한으로 변경하기 때문에 메모리 누수가 적다.
• 컴포넌트로 이루어져 있어서 재사용이 높다.

Virtual DOM과 DOM의 차이

 

React 문법을 이용해서 버튼 만들기

React CDN 링크

https://ko.legacy.reactjs.org/docs/cdn-links.html

CDN 링크 – React

CDN 링크를 복사해서 HTML 파일 head에 붙여넣어 사용한다.

 

function HelloWorldButton(){

    const [isClick, setIsClick] = React.useState(false);

    const text = isClick ? '클릭이 되었군요!' : 'hello, react world';

    // button

    // button > div > span으로 구조 변경

  return React.createElement(

    "button",

    {

      onClick:() => setIsClick(!isClick),

    },

    React.createElement('div', null, React.createElement('span', null, text))

  );

}

const element = React.createElement;

const DOMContainer = document.querySelector('#app');

const root = ReactDOM.createRoot(DOMContainer);

root.render(element(HelloWorldButton));

하지만 이 문법을 사용하면 무슨 구조로 되어 있는지 눈에 들어오지 않아 비추천한다.

 

JSX 문법을 이용해서 버튼 만들기

function HelloWorldButton(){

  const [isClick, setIsClick] = React.useState(false);

  const text = isClick ? '클릭이 되었군요!' : 'hello, react world';

  // button

  // button > div > span으로 구조 변경

  return(

    <button onClick={() => setIsClick(!isClick)}>

      <div>

        <span>{text}</span>

      </div>

    </button>

  )

}

const DOMContainer = document.querySelector('#app');

const root = ReactDOM.createRoot(DOMContainer);

root.render(<HelloWorldButton />);

JSX는 Javascript + XML로 만들어진 문법이다.

JSX 문법을 사용하면 HTML 문법과 비슷해서 구조가 한 눈에 잘 들어온다.

 

BABEL

• 옛날에는 큰 기능을 하지 않는 자바스크립트 컴파일러(해석기)였지만 리액트에서는 중요한 역할이다.
• 리액트의 jsx 문법을 브라우저가 읽을 수 있도록 vanillla JS로 변환(통역)하는 작업을 담당한다.

 

webpack

• 자바스크립트의 모든 코드들을 잘 모아서 합치고, 브라우저가 이해할 수 있도록 바꿔준다.
• 바벨과 달리 js, jsx 뿐만 아니라 다른 여러 타입을 해석하고 jsx to js는 babel을 이용한다.

하지만 CDN을 이용해서 react project를 빌드(실행 가능한 소프트웨어로 만드는 과정)할 때는 webpack설정을 해줘야한다.

그래서 CDN이 아닌 npm을 이용해서 프로젝트를 한다.

 

npm

Node.js

Node.js란 Javascript를 서버에서 사용할 수 있도록 만든 프로그램이다.

서버를 만들 수 있고 백엔드단을 구성할 때 많이 사용한다.

 

리액트와 npm

리액트는 보통 CDN 링크를 통해서 사용하는 방법이 아닌 npm을 이용해서 프로젝트를 시작한다.

 

npm

npm이란 node package manager로 Node.js의 패키지를 사용할 수 있는 명령어이다.

node.js에는 다른 사람들이 만들어 놓은 모듈들이 수많은 패키지로 존재하기 때문에 간편하게 다운받아서 사용할 수 있다.

그 수많은 패키지 중에 리액트 프로젝트를 시작할 수 있는 패키지가 있는 것이다.

 

Node.js 설치

https://nodejs.org/ko/download

다운로드 | Node.js

Node.js를 설치 후 cmd(terminal) / git bash에 node -v 혹은 node --version으로 버전이 제대로 나오는지 확인한다.

 

npm 사용

1. 프로젝트를 진행할 폴더에서 npm init을 입력 → npm을 사용할 것이다.

• package.json : 프로젝트 폴더에서 npm init 명령어를 사용하는 순간 자동으로 생기는 파일이다. 모듈의 정보(버전 등_와 프로젝트 정보 등을 담고 있다.

2. 사용하고 싶은 모듈 설치는 npm 모듈이름을 입력한다.

• node_modules : 모듈 저장 공간, 모듈을 설치하게 되면 이곳에 설치된다.

 

node_modules

node_modules는 아주 많은 폴더와 파일로 이루어져 있기 때문에 용량이 매우 크다. 그래서 깃허브에 올리지 않도록 .gitignore에 추가해야 한다.

 

※ 실제 모듈이 없으면 다른 컴퓨터에서는 사용할 수 없는데 node_modules를 github에 올리지 않는다면 어떻게 하나?

    → 모듈에 대한 모든 정보를 가지고 있는 package.json이 있기 때문에 npm install이라는 명령어를 통해

         node_modules를 설치할 수 있다.

 

React Project 만들기

https://create-react-app.dev/docs/getting-started/

Getting Started | Create React App

 

create react app 사용법

npm 공식 홈페이지에 들어가보면 create react app 사용법이 나온다.

npx란? creat-react-app 이라는 모듈을 사용하기 위해서npm 대신 사용하는 명령어이다.

(npx 대신 yarn이라는 명령어를 사용하기도 한다.)

$ cd 폴더  # 넣을 폴더로 이동한다.
$ npx create-react-app 프로젝트이름  # 프로젝트 이름은 띄어쓰기, 한글, 대문자 안된다. 하이픈 사용
$ ls  # 현재 폴더 내부 확인
$ cd 만든프로젝트이름  # 해당 프로젝트로 이동한다.
$ npm start  # localhost:3000 페이지가 열린다.

 

리액트 페이지는 기본적으로 항상 localhost:3000이다.

 

create-react-app 프로젝트 폴더 구조

 

/node_modules

npm을 시작하면 생기는 폴더. 내부에 모듈과 관련된 정보가 들어있다.

 

/publick

index.html & favicon.ico 등 가상 DOM을 위한 html 파일이 들어있는 곳이다.

 

/src

실제 react 코드(컴포넌트)를 작성하는 곳이다.