[React] React 완벽 가이드 섹션 2 : 자바스트립트 새로고침

【글로벌 Best】 React 완벽 가이드 with Redux, Next.js, TypeScript | Udemy

---

1. let과 const

1) let : es6 이전에 쓰던 var과 같음, 변수

2) const : 상수(처음 할당한 후 다시는 재할당 불가능)

 

 

2. 화살표 함수 : es6부터 쓰는 새로운 함수 선언 방식

const/let 함수이름 = (매개변수) => {
	// 함수 내용
}

함수이름(); // 함수 호출

아래와 같은 방식으로 리턴문을 생략가능하다

const mutiply = (number) => number*2 // number*2가 리턴됨

 

 

3. Exports, Imports

1) Exports : 다른 js파일로 내보내기

export default person;  // default export
export const data=10;  // named export

import person from './person.js';
import {data} from './utility.js';
import {data as d} from './utility.js';  //별칭 지정
imoprt * as bundled from './utility.js'; //여러 모듈 가져오기

2) Imports : 다른 js파일을 가져오기

 

 

4. 클래스 이해하기

//클래스 선언
class Myclass {
  constructor(){ ... } // 생성자
  method() { ... } //메소드
}

class SmallClass extends Myclass {
  constructor(){  // 생성자
    super(); // 부모클래스의 메소드를 사용하기 위해 선언
    ... 
  }
  method() { ... } //메소드
}

 

5. 클래스, 속성 메소드

- es6부터 필드를 선언할 때 꼭 생성자를 선언하지 않아도 된다.(아래와 같이 선언 가능)

class Human	{
	gender = 'male';
    	name = 'jax';
}

 

 

6. 스프레드 및 나머지 연산자(...)

1) spread연산자로 쓰일 때 : 배열의 모든 요소를 전개하고 싶을 때 사용

const numbers [1,2,3];
const newNumbers = [...numbers, 4];
console.log(newNumbers); // [1,2,3,4]

const person = {
  name : 'Max';
};
const newPerson = {
  ...person,
  age: 28
}
console.log(newPerson); // name과 age를 가진 오브젝트가 출력된다.

2) Rest연산자로 쓰일 때 : 매개변수 리스트를 배열로 통합함

const filter = (...args) => {
  return args.filter(el => el === 1);
}

console.log(filter(1,2,3)); // 1

 

7. 구조분해할당

1) 배열 구조분해 할당

const numbers = [1,2,3];
[num1, num2] = numbers;
console.log(num1, num2); // 1 2

[num1, ,num3] = numbers;
console.log(num1, num3); // 1 3

2) 객체 구조분해 할당

const myObj = {
    name: 'Max',
    age: 28
}
const {name} = myObj;
console.log(name); // prints 'Max'
console.log(age); // prints undefined
console.log(myObj); // prints {name: 'Max', age: 28}

 

8. 참조형 및 원시형 데이터 타입

- 객체/배열은 참조값이 복사되는 것이기 때문에 복사할 때 조심해야함

//새로운 객체로 복사하기
const person = {
  name:'Max';
}

const secondPerson = {
  ...person
};

 

9. 배열 내장 함수

1) map함수

const numbers = [1, 2, 3];

const doubleNumbers = numbers.map((num) => {
  return num*2;
});

console.log(doubleNumbers); // 2 4 6

2) filter함수

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

3) reduce함수

- reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 누적하여 하나의 결과값을 반환 함

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10