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

성지혜·2022년 12월 5일
0

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파일로 내보내기
2) imports: 다른 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'; //여러 모듈 가져오기

4. 클래스 이해하기

  • 클래스는 객체를 위한 틀로, 프로퍼티와 메소드를 가질 수 있다.
  • 메소드는 클래스에 정의한 함수이고 프로퍼티는 클래스에 정의한 변수라고 할 수 있다.
  • new 키워드로 클래스의 인스턴스를 생성할 수 있다. !
//클래스 선언
class Myclass {
  constructor(){ ... } // 생성자
  method() { ... } //메소드
}

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

5. 클래스, 속성 및 메서드

프로퍼티는 클래스와 객체에 추가되는 변수같은 것, 메소드는 클래스와 객체에 추가되는 함수같은 것.

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. 구조분해할당(Destructuring)

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
};
profile
많이많이 시도해보기

0개의 댓글