React 001-2 리액트에 많이 사용되는 자바스크립트

섹션2-자바스크립트 복습

let, const

var에 더해 es6에서는 let과 const가 추가되었다. 

• let - 값을 수정할 수 있는 변수를 정할 때 사용
• const - 한번 지정하면 변하지 않는 변수를 지정할 때 사용

화살표 함수

자바스크립트 함수를 생성하는 또다른 방법

 

• 전통적인 방법

function myFnc(){
...
}

• 애로우 펑션

const myFnc=()=>{
...
}

화살표 함수 안에 this를 사용하면 언제나 원하는 목표를 지정 할 수 있게 된다.

const printMyName = (name) =>{
	console.log(name);
}

printMyName('Sloth')

//결과 "Sloth"

인수가 하나만 있다면 선언할 때 괄호를 없애도 되고 함수를 한줄로 짧게 만들 수 도 있다.

const multiply = (number) => {
	return number *2;
}

//위 코드를 아래 코드로 짧게 쓸 수 있다

const multiply = number => number*2;

exports & imports(modules)

다른 파일에서 컨텐츠를 불러올 수 있고 어디서 온 건지 알 수 있게 만들어 준다.

• default - 파일에서 어떤 것을 가져오면 항상 default export가 내보낸 것을 기본값으로 가져온다.
• const -  특정한 것을 가져오기 위해 중괄호를 사용해 불러온다.

import 할 때 , 를 사용해서 한번에 가져올 수도 있음!

이름을 설정하는 방법

Classes

자바스크립트 오브젝트를위한 청사진으로 생각하기

후에 리액트에서 컴포넌트를 생성할 때 주로 사용된다.

Properties&Methods

• 프로퍼티 - 클래스와 객체에 추가되는 변수 같은 것

ES6

constructor(){
	this.myProperty='value'
}

ES7

myProperty='value'
//생성자 함수를 호출하지 않아도 된다.

• 메소드 - 크래스와 객체에 추가되는 함수같은 것

ES6

myMethod(){...}

ES7

myMethod=()=>{...}

그냥 봐서는 길어진 것 같지만 이렇게 사용했을 때 프로퍼티 값으로 화살표 함수를 사용하기 때문에 this키워드를 사용하지 않아도 된다.

Spread & Rest Operators   

...를 어디에 사용하냐에 따라 spread라고 불리기도 하고 Rest라고 불리기도 한다.

• Spread
  스프레드 연산자는 배열의 원소나 객체의 프로퍼티를 나누는데 사용된다.
  배열이나 객체를 펼쳐놓는다.

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

//결과 [1,2,3,4]

const person={
    name:'Sloth'
};
const newPerson={
    ...person,
    age:30
}
console.log(newPerson);

/**
결과
[object Object] {
  age: 30,
  name: "Sloth"
}
*/

• Rest
  함수의 인수 목록을 배열로 합치는데 사용한다

const filter=(...args)=>{
  return args.filter(el =>el ===1);
}
console.log(filter(1,2,3));

//결과 [1]

...로 rest연산자를 생상해서 배열을 필터링 했기 때문에 결과는 1만 나옴

Destructuring

배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장 할 수 있게 해줌

  스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 사용되는 어떤 것에 전달하는데 

  디스트럭쳐링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장한다.

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

/**
결과
1
2
*/

참조형, 기본형 데이터 타입

• 기본형
  • number, string,boolean 모두 기본형 자료 타입이고, 재 할당하거나 변수를 다른 변수에 저장할 때 마다 값을 복사한다.
• 참조형
  • 객체와 배열은 참조형 자료이다.
    객체는 메모리에 저장되어 있고 저장된 포인터가 복사되어 출력한다

배열함수 새로고침

const numbers=[1,2,3];
const doubleNumArray=numbers.map((num)=>{
  return num*2;
});
console.log(numbers);
console.log(doubleNumArray);

/**
결과
[1, 2, 3]
[2, 4, 6]

map() 메소드는 모든 값을 새로운 배열로 반환한다.
*/