[React] 처음 만난 리액트 section(0~2)

Section 0. 준비하기

 

HTML과 CSS

• html은 뼈대 css는 레이아웃

 

SPA(Single Page Application)

• 하나의 페이지만 존재하는 웹 사이트 / 웹 애플리케이션
• 기존 방식: multi page application 사용자가 페이지 요청할 때 마다 새로운 페이지가 로드됨
• SPA: html 파일이 하나만 존재. 단 하나의 페이지만 존재. body 태그의 내부가 동적으로 채워짐. 리액트가 이를 수행

 

JavaScript 소개 및 자료형

• ECMAScript

 

Script Language 특징

• 런타임시에 코드가 해석되고 실행됨

 

Data Type

• 자바스크립트는 동적타이핑 방식을 사용. 변수의 자료형이 선언 시가 아닌 대입되는 시점에 정해짐

 

JavaScript의 연산자

• 대입 연산자
• 사칙연산
• 증감연산(전위, 후위)
• 비교연산
• 동등연산
• 일치연산(Strict equality operators) : === !== 변수의 값 뿐만 아니라 자료형이 같은지까지 검사
• 논리연산
• 삼항 연산자

JavaScript의 함수

function statement

function sum(a, b) {
  return a + b;
}

arrow function expression

const multiply = (a, b) => {
  return a * b;
}

 

Section 1. 리액트 소개

 

리액트는 무엇인가?

• UI를 위한 자바스크립트 기능 모음집
• 자바 스크립트 라이브러리
• 프레임 워크 vs 라이브러리 : 흐름에 대한 제어가 누구한테? 프레임 워크는 개발자가 흐름 제어 X 라이브러리는 O
• SPA를 쉽고 빠르게 만들 수 있게 하는 도구

리액트의 장점과 단점

장점

• 빠른 업데이트 & 랜더링 속도 : Virtual DOM
  - DOM: 사이트의 정보가 모두 담겨 있는 객체라고 보면 됨
• Component-Based : 레고 블록을 조합하듯
  - 재사용성 : 다른 모듈의 의존성을 낮추고 호환성 문제를 낮추는 방향으로 개발을 해야 한다. 유지 보수가 용이하다.

단점

• 방대한 학습량
• 계속 바뀜
• 높은 상태관리 복잡도

 

Section 2. 리액트 시작하기

 

 

create-react-app

$ npx create-react-app <project-name>

으로 react app 생성
이후 cd <project-name> npm start 로 실행