2021.03.20

1. React란?

 : 리액트는 페이스북 사에서 만든 자바스크립트 라이브러리이다.
   페이스북에서 자체적으로 이용하고 있을 뿐만 아니라 많은 웹 어플리케이션이 리액트로 만들어졌다.

   "리액트는 유저 인터페이스를 만들 수 있는 라이브러리이다!"
   → 사용자에게 보여지는 UI 만들고 사용자가 클릭을 하거나 이벤트가 발생하게 되면
       그 이벤트에 맞게 반응하도록 만들어진 라이브러리이다.

   복잡한 웹 어플리케이션을 만들때 MVC 패턴을 사용한다.

   * 리액트는 사용자에게 UI를 보여주고 이벤트를 처리하는 일들을 할 수 있다.

   React : 웹 어플리케이션 UI 개발
   React Native : 모바일 어플리케이션
   React + Electron : 데스크탑 어플리케이션

   "리엑트는 컴포넌트로 이루어져 있는 UI 라이브러리이다."

   컴포넌트 : 버튼과 같은 하나, 한 가지의 기능을 수행하는 UI 단위를 말한다.
                 서로 독립적이고 재사용이 가능한 것을 의미한다.

   각각의 독립적인 컴포넌트를 서로 조립해서 만들어 놓는 것을 리액트 애플리케이션이라고 한다.

   ** 컴포넌트 코드

import React from 'react'

class MenuButton extends Component {
	state = {
		num: 0,
	};

	render() {
		return <button>
		{this.state.num}
		</button>;
	}
}

export default MenuButton;

   * state : 데이터를 나타내는 객체
   * render() : 사용자에게 현재 컴포넌트를 어떻게 보여줄지 나타내는 함수(JSX)

   "리액트는 데이터가 변경될 때마다 애플리케이션 전체를 다시 렌더링한다."

   개발자는 데이터가 변경이 되면 해당하는 부분을 업데이트 하는 것을 걱정하지 않아도 된다.
   리엑트는 state에 맞게 rander 함수에 어떻게 표기될 것인지
   한 번만 정의하면 알아서 render 함수를 다시 호출해주기 때문이다.

 

 

2. 리액트 공식 사이트

   리액트 공식사이트로 이동하기

 

 

3. Create React App을 위한 사이트

   Create React App을 위한 사이트로 이동하기

 

 

4. 리액트 툴

1) 노드
 : 자바스크립트를 실행할 수 있는 환경

  └ npm은 패키지 매니저이다.
      yarn은 npm보다 성능을 개선하고 보안 이슈를 해결한 페이스북에서 만든 새로운 패키지 매니저이다.
      yarn은 npm 위에 동작하기 때문에 npm이 설치되어 있어야 한다.
      package.json을 사용하면서 npm과 호완하며 사용한다.
      [설치] npm i yarn --global

 

2) 터미널
 : 운영체제에서 프로그램을 실행할 수 있는 환경

  └ 윈도우용 : Cmder 다운받으러 이동하기
  └ cd 경로 해당 경로로 이동
      cd .. 상위 디렉토리로 이동
      c: c드라이브로 이동
      d: d드라이브로 이동

 

3) Git
 : 버전관리를 할 수 있는 툴

 

4) 크롬 브라우저 - React Developer Tools

 

5) Visual Studio Code

   ① Reactjs Code snippets

   ② Auto Import

 

 

5. create react-app

 : 페이스북에서 만든 리액트를 개발하는 개발자들이 공통적으로 사용하는 유용한 툴을 
   한번에 자동으로 설치할 수 있도록 도와주는 유용한 툴이다.

 

** yarn create react-app 프로젝트명

 

* yarn start

 

** .gitignore
 : 명시되어 있는 파일들은 깃에 저장하지 않는다.

** package.json
 : npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들이 명시되어 있다.

* README.md
 : 프로젝트에 대한 설명을 명시하는 파일이다.

** public 디렉토리
 : 사용자에게 배포할 때 외부적으로 보여지는 리소스들을 포함하는 디렉토리이다.

** src 디렉토리
 : 소스코드를 포함하는 디렉토리이다.

 

** 숨겨진 툴
   └ BABEL
       자바스크립트 트랜스컴파일러이다.
       ECMA Script 2015 버전 코드를 이전 버전으로 변환해주는 툴이다.
       Type Script, JSX 같은 순수 자바스크립트가 아닌 문법을 브라우저가 이해할 수 있도록 
       자바스크립트 코드로 변환해주는 역할을 하기도 한다.
   └ Webpack
       소스코드나 리소스 이미지들을 한 번에 묶어서 번들 단위로 사용자에게 제공할 수 있도록 도와주는 툴이다.
       또한 자바스크립트 코드를 줄여주고 긴 변수나 함수의 이름을 해커들이 알아볼 수 없도록 변경해주는 역할
   └ ESLint
       코드에 잘못된 점이 있으면 경고를 표시해주는 툴이다.
   └ Jest
       코드를 작성할 때 유닛 테스트를 할 수 있도록 해주는 툴이다.
   └ PostCSS
       css 전처리기 중 하나이다.
       정해진 프레임워크에 따라 css를 작성하면 그 css를 브라우저가 이해할 수 있는 css 코드로 변환한다.
       sass나 less와 비슷하지만 PostCSS는 다양한 플러그인이 있어서 확성성이 좋다.

 

* rm -rf 폴더_및_파일명

 

 

6. 새 프로젝트 만들기

yarn create react-app begin

cd begin
yarn start

 

** JSX
 : 리액트와 마찬가지로 페이스북에서 개발한 확장 구문이다.

 

** JSX 특징
   └ 태그는 꼭 닫혀야 한다.
   └ 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 한다.
       불필요한 div를 사용하고 싶지 않다면 <>Fragment를 사용하면 된다.
   └ 주석은 { /* */ } 표현한다.
   └ CSS 속성은 스네이크 표기법 → 카멜표기법으로 써야 한다.

 

** /src/Hello.js

import React from 'react';

function Hello() {
    return <div>안녕하세요. React</div>
}

export default Hello;

 

** /src/App.js - 두 개 이상의 태그는 무조건 하나의 태그로 감싸야 한다.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello/>
      <Hello/>
      <Hello/>
      <Hello/>
    </div>
  );
}

export default App;

 

** /src/App.js - 위와 같이 <div></div>를 써도 되고, 아래와 같이 <></>를 써도 된다!

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <>
      <Hello/>
      <Hello/>
      <Hello/>
      <Hello/>
    </>
  );
}

export default App;