01. React 를 시작하기전에

<aside> 🚩 Goal: 기초적인 ES6 문법을 조금 알아보고 React를 시작합시다.

</aside>

[목차]

01. React를 시작하기 전에.mp4

1. 화살표 함수

(1) 자바스크립트에서 함수 만드는 방법
(2) 함수 선언식 / 표현식 코드
(3) 화살표 함수 (Arrow function)

2. 객체와 배열 구조분해 할당

(1) 구조 분해 할당이란?
(2) 객체 구조분해 할당 코드 비교
(3) 배열 구조분해 할당 코드 비교

3. 함수 인자에서 구조분해 할당

(1) 함수 내 구조분해 할당 코드 비교

4. spread operator (전개 구문)

(1) 전개 구문이란?

기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성 할 수 있습니다. 기존의 데이터 (객체나 배열)에는 전혀 영향을 주지 않고 복사해서 새로운 것을 만듭니다.

const box = {size: "big", color: "red"};

const newBox = { ...box}; // {size: "big", color: "red"}
const newBlueBox = {...box, color: "blue" }; // {size: "big", color: "blue"}

5. rest operator (나머지 매개변수 구문)

(1) 나머지 매개변수 구분이란?

rest 문법은 spread와 비슷해보이지만 조금 다른 기능을 합니다. 객체나 배열에서 구조 분해 할당을 했을 때 나머지 정보를 묶어서 표현할 수 있습니다. rest 라는 키워드를 꼭 사용하지 않아도 되고, 개발자가 편한 키워드를 사용해도 됩니다.

const user ={id: 1, name: "둘리", age: 10, location: "seoul"};

// rest 사용
const {name, ...rest} = user;

// 콘솔에 rest를 찍어보면, 구조분해 할당을 한 정보를 제외한 나머지 값을 보여줍니다. 
console.log(rest) // {id: 1, age: 10, location: "seoul"}