리액트 입문 1주차 (React특징, 자주쓰는 자바스크립트 ES6문법)

리액트는 spa 기반의 프론트엔드 개발 프레임워크중 하나 컴포넌트 단위의 독립적인 블록을 이용한 개발방법

SPA란 single page application 의 약자 
MPA(multi page application) 과는 상반된 개념

MPA란 단어는 원래 없었는데 SPA가 나오면서 상반된개념을 설명하기 위해서 생김

SPA의 특징 
딱 한개의 페이지로 구성된 웹 앱
서버에 1회 리소스를 요청 (index.html) 페이지를 그려주는건 다 자바스크립트로
그이후엔 필요할떄마다 데이터만 받아와서 동적으로 수정하게됨
굉장히 자연스러운 UX 구현가능
비슷한기술들로는 Angular, Vue가있음(구현의 차이는 존재)

단점으로는 SEO(Search Engine Optimization)에 약함
*SEO란 서치엔진 최적화라고 보면됨. 서치엔진이 내용을 찾을수가 없기때문에 서치엔진에 노출이 안됨. 
이런걸 보완하기 위해서 next.js가 있음.

SPA 프레임워크의 종류
1. React
-페이스북이 만들고 유지보수
-선발주자인만큼 막강한 커뮤니티와 자료를보유
2. Vue
-배우기쉬움 간단함
-후발주자라 자료가 적음 공식문서의 의존도가 심함
3. Angular
-안정적임
-배우기어렵고 무거움 점유율이 낮은 프레임워크

왜 React를 배우는가 
NPM trends 라는 홈페이지에서 보면 시장에서 가장많이 쓰고있음
RN(React Native)와의 상생 모바일앱(AOS,IOS)도 큰 무리없이 배울수있음.

컴포넌트(=벽돌)
리액트가 채택한 개발방법 벽돌을 쌓아 집을 짓는다 생각하면됨.
SPA기반은 컴포넌트 단위로 변경함 (=렌더링)

React에서 자주사용되는 필수 ES6문법

var는 block level scope 가 아니여서 {}안에서 선언했어도 다른곳에서 사용이 가능함
헷갈리기 때문에 잘 안쓰고 let, const를 씀 

object가 나오면 무조건 생각해야 하는게 key value 페어

객체안에는 무엇이든 올 수 있음(ex : 함수라든가 ) 
만약 객체 안의 key 가 변수와 같으면 생략가능 
ex const age = 21;
const obj ={
name : 'eonhyo',
age,
}  

얕은복사에 대해 주의가 필요함.
예를들어 const obj1 = {
  value1: 10,
};

const obj2 = obj1;
obj2.value1 += 1;

이런식으로 하면 간단하게 생각하면 obj2 의 value1에만 1을 더한다 생각할수있지만
obj1의 객체를 메모리에 저장한것에 +1을 하는것
obj1,2 둘다 '12345'라는 메모리에 저장한 것 이라고 치면 
12345에 1을 더하는것이기 때문에 obj1의 값도 변경이됨  

그러면 어떻게 해야하냐면 다른 메모리주소값을 만들어야됨
예를들면 이런식으로
const obj3 = JSON.parse(JSON.stringify(obj1));
여러가지 방법으로 얕은복사가 아닌 방법을 사용할수있음

*JSON 이란 
JavaScript Object Notation의 약자로서 데이터를 문자열의 형태로 나타내기 위해서 사용됨

JSON.parse는 JSON문자열을 javascript 객체로 변환시켜줌

Template Literals (= `` ) 
const testValue = 3 ;
자바스크립트 변수 사용 가능 ` 예시 ${testValue} 입니다. ` 이런식으로 사용이 가능함
멀티라인을 입력할때 의미가있음 

구조분해할당 (Array, Object Desturturing)
ex : 
객체
const person = {
    name : "바보",
    age : "30"
};

const {name, age, notpound} = person;

배열

const testArr = [1, 2, 3, 4, 5];
const [one, two ,three] = testArr;

객체 구조분해할당은 key값이 중요하고 배열은 순서가 중요 

전개연산자 (Spread Operator) ...
ex : 
let [name, ...rest] = ["바보", 30, "창원시"]

console.log(rest) // [30, "창원시"]

배열앞에 ... 을 붙이면 배열의 구조를 깸.

화살표함수 (Arrow Function)

function mysum1 (x, y) {
return x+y ; 
}
가 기본 함수의 형태라면
화살표함수는 
const mysum2 = (x, y) => {
return x+y; 
}
이런식으로 변수선언을 한 뒤 표현함
만약 리턴문이 한줄이면
const mysum2 = (x, y) => x + y; 
이런식으로 한줄로 표현이 가능함  
한 줄로 표현할땐 return은 없애야됨 << 이거 중요