React, ES6

React?

---

1. SPA 형식

Single Page Application 한 개의 페이지로 이루어진 애플리케이션
여러개의 페이지로 이루어진 MPA(Multi Page Application)와 상반된 개념

1.1. 장점

서버에 1회 리소스를 요청하여 필요한 데이터만 받아 기존 페이지를 수정하여
MPA처럼 리랜더링이 없어 자연스러운 UX를 구현한다.

1.2. 단점

SEO(Search Engine Organization)은 HTML 페이지 기반으로 검색을 진행하는데
SPA는 한 개의 HTML페이지로 구성되어 MPA에 비해서 서치 엔진 최적화에 약하다.
후에 이를 보완하는 방법으로 Next.js가 있다.

2. 컴포넌트

Component란 react가 채택한 개발방법
후에 Component에서 자세하게 다룸

필수 ES6 문법

---

1. 선언

• const 상수,
• let 변수
• 1.3. var 블록레벨 스코프 적용이 불가하여 사용을 지양함
  
  

2. 템플릿 리터럴

Template Literals는 백틱을 사용하여 변수를 넣는 문법

2.1. 기능

• 일반 텍스트
• 멀티 라인

  `string text line 1
  string text line 2`
  

• 플레이스 홀더를 이용한 표현식

  let placeHolder = "누구누구"
  `나는${placeHolder}이다.`
  

  
  

3. 배열/객체 비구조화

Array/Object Destructuring || 구조분해 할당
새로운 배열/객체의 값을 선언하고 기존 값을 넣어준다.

3.1 객체의 비구조화

const person = {
    name: "르탄"
    age: "20"
    }
const {name, age} = person
console.log(`${name}님은 ${age}살`)

3.2. 배열의 비구조화

const testArr = [1, 2, 3, 4, 5];
const [val1, val2, val3, val4, val5] = testArr;
console.log(val1);

4. 전개 연산자

…은 뒤의 모든 값을 가진다 // 10, “Seoul”

let [name, ...rest] = ["Tom", 10, "Seoul"];

let tom = { name: "Tom", age: 10, region: "Seoul",};

let steve = { ...tom, name: "Steve",};

5. JSON

JSON.stringify() 
JSON.parse() 

6. Arrow Functions

화살표 함수의 다양한 형태

const mysum1 = (x, y) => x + y;
const mysum2 = (x, y) => {x, y};
const mysum3 = (x, y) => ({x: x, y: y}); const mysum4 = (x, y) => {
  return {x: x, y: y};
}
const mysum5 = function(x, y) {
  return {x: x, y: y};
};
function mysum6(x, y) {
  return {x: x, y: y};
}