[React] React의 개념 / 개발환경 구성하기

---

#1. React

1. React의 개념

1) React란?

• 리액트는 페이스북에서 개발한 자바스크립트 라이브러리이다. (사용자 인터페이스(UI)를 만들기 위한 라이브러리)
• 리액트는 컴포넌트 기반으로, 컴포넌트에 데이터를 보내면 개발자가 설계한 대로 UI가 만들어져 사용자에게 보여진다.
• 하나의 HTML에 여러개의 페이지를 구성하는 싱글 페이지 어플리케이션(Single Page Application. SPA)에 사용된다.
• 리액트를 사용하지 않아도 웹페이지를 만들 수 있지만, 사용자와의 상호작용을 UI로 쉽게 구현하고, 대규모의 웹페이지를 관리하기 위해 사용된다.
• 리액트는 똑같은 구조가 여러번 나타난다면 재사용할 수 있는게 핵심이다.

 

2) React의 특징

-1. Component 기반 구조

• 컴포넌트(Component)는 독립적인 단위의 모듈 을 뜻한다.
• UI를 하나의 큰 덩어리로 보면 컴포넌트는 그 덩어리를 이루는 작은 요소들이다.
• 즉, 한 페이지 내에서 여러 부분을 독립된 컴포넌트로 만들고, 이 컴포넌트들을 조립해 화면을 구성한다.
• 따라서 전체 코드를 파악하기가 상대적으로 쉽고, 단위 별로 관리하기 때문에 재사용성이 높다.
  • 코드를 반복해서 입력할 필요 없이 import를 통해 사용하면 되고, 유지보수 및 관리가 용이해진다.

import React from "react";
import Component1 from "./Component1";
import Component2 from "./Component2";

function App() {
  return (
    <div>
      <h1>Hello React</h1>

      <Component1></Component1>
      <Component2></Component2>

    </div>
  );
};

export default App;

 

-2. Data Flow

• 리액트는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가진다.
• 데이터를 내려 보낼 수 만 있고, 올릴 수 는 없다 (부모에서 자식으로 흐른다.) 
• 부모의 데이터를 바꿔주기 위해서는 state를 사용해야 한다.

 

-3. JSX (JavaScript eXtention)

• JSX는 리액트에서 사용 가능한 Javascript를 확장한 문법이다.
• 리액트에서는 HTML을 표현할 때, JSX를 사용하여 표현한다.
• 겉으로 보기엔 HTML과 다를게 없어 보이지만, 리액트의 노드 모듈에 내장되어 있는 Webpack 안에 Babel에 의해 자바스크립트로 변환된다. (React의 구동 원리, 여러 파일을 단 하나의 파일로 병합해서 index.html에 계속해서 갱신한다.)
• 즉, 자바스크립트 코드를 HTML 처럼 표현할 수 있다는게 장점이다.

※ HTML 과 JSX 의 차이

• HTML 요소에 class 값을 정의할 때는 class="" 대신 className="" 을 사용한다.
• HTML 의 주석은 <!-- 주석 --> , JSX 의 주석은 {/* 주석 */} 을 사용한다.
• HTML 에서는 닫는 태그 </> 를 안 붙여도 오류가 안나지만, JSX에서는 오류가 발생한다. (반드시 닫는태그를 명시해야한다)

 

-4. Virtual DOM

• 가상의 Document Object Model을 뜻한다.
• HTML 코드를 작성하고 HTML 파일을 열면 작성된 코드들이 DOM을 만든다.
  
  • HTML 코드가 수정되면 전체 DOM을 새롭게 만드는 비효율적 구조이다.
• 하지만, 리액트의 Virtual DOM은 가상의 DOM을 만들어 변경 사항이 있을 경우 전체를 새롭게 만들지 않고, 변경된 부분만 실제 DOM에 반영하는 방식이다. (효율성과 속도가 높아진다)

 

-5. Props and State

• Props
  • props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다.
  • props 는 읽기 전용 데이터이다.
  • 자식 컴포넌트에서는 props를 변경할 수 없고, 최상위 부모 컴포넌트만 변경할 수 있다.
• State
  • state는 동적인 데이터를 다룰 때 사용한다.
  • 사용자와의 상호작용을 통해 데이터를 동적으로 변경을 해야할 때 사용한다.
  • state는 클래스형 컴포넌트에서만 사용할 수 있는데 각각의 state는 독립적이라 다른 컴포넌트의 직접적인 접근은 불가능하다.
  • 자신보다 상위에 있는 state는 변경이 가능한데, state를 변경해주는 함수는 props로 받는다면 변경이 가능하다.
    • props로 넘겨줄 때는 this의 binding을 신경 써야한다.

 

#2. 개발환경 구성하기

1. 개발환경 구성하기

1) Node.js (https://nodejs.org/ko/)

• 리액트를 사용하기 위해서는 Node.js가 필수로 설치되어 있어야 한다.
• 작성일 기준 18.0.0 버전이 최신 버전이지만 LTS 버전을 설치하는게 안정적이다.
• Mac M1의 경우 17 이상의 버전 필요.

※ 설치확인

node --version

• 윈도우의 명령프롬프트나 맥의 터미널에서 해당 명령어를 수행한다.
• 버전이 나오면 정상적으로 설치, 안나오면 설치되어 있지 않음.

 

2) yarn

npm install -g yarn

• 윈도우의 명령프롬프트나 맥의 터미널에서 해당 명령어를 수행한다.
• yarn 설치는 반드시 Node.js가 설치된 상태에서 진행해야 한다.

※ 설치확인

yarn -version

• 윈도우의 명령프롬프트나 맥의 터미널에서 해당 명령어를 수행한다.
• 버전이 나오면 정상적으로 설치, 안나오면 설치되어 있지 않음.

 

※ npm 과 yarn

• 둘다 패키지 관리자 역할을 하며, 목적이 같기 때문에, 둘이 같다고 봐도 무방하다.
• 예를들어 pakage.json에 저장할 때
  • npm은 npm install --save 파일이름 을 사용하고, yarn은 yarn add 파일이름 명령어를 사용한다.
• 반대로 삭제할 때는
  • npm은 npm uninstall --save 파일이름, yarn은 yarn remove 파일이름 명령어를 사용한다.

 

2. 프로젝트 생성하기

1) 프로젝트 생성

• 윈도우의 명령프롬프트나 맥의 터미널에 프로젝트 폴더를 생성할 위치에서 아래의 명령어를 수행한다.
• 프로젝트 이름은 영어 소문자만 사용 가능하다.

yarn create react-app 프로젝트이름

ex)
yarn create react-app example

외계어들이 막 나오면서 설치가 진행된다.

설치 후 생성되어 있는 파일들 (vscode에서 확인한 내용)

 

2) 프로젝트 실행

• 해당 프로젝트가 생성된 위치에서 아래 명령어를 수행한다.
• 주의할점은 실행중인 명령프롬프트나 터미널을 종료하면 접속이 끊긴다. (계속 키고 있어야 작업이 가능!)

yarn start

이런 문구가 나오면 정상적으로 실행된 상태

웹 페이지에 이 화면이 나오면 정상적으로 실행 완료