리액트에서 사용하는 기본적인 자바스크립트 문법들(with es6)

let/const

let은 재할당가능 const는 재할당이 불가능하다. 말그대로 상수를 뜻함.

arrow function

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

Exports/Imports

리액트 프로젝트에서 모듈(자바스크립트 파일들에 코드를 분할함)을 전역으로 내보내고 가져온다.
내보낼 변수를 default로 설정할 수도 있고(unnamed),
한 파일에 여러 변수를 내보내고 중괄호를 사용해 특정 변수를 가져올 수도 있다(named).
이때, 와일드카드(*)를 사용해 한꺼번에 가져올 수도 있다.

//index.js
export default const name = '설기'
//index2.js
export const gender = 'female'
export const age = 4
//home.js
import seolgi from './index.js'
import {gender, age} from './index2.js'
//home2.js
import * as genderAndAge from './index2.js'

class

객체의 형태를 정의한다.

class Animal {
  species = 'dog';
}
class Dog extends Animal {
  name = 'seolgi';
  sayName = () => {
    console.log(this.name);
  }
}
const dog = new Dog();
console.log(dog.name) //seolgi
dog.sayName() //seolgi
console.log(dog.species) //dog

spread, rest

... 점 세개의 마법
oldArray, oldObject의 모든 프로퍼티와 값을 꺼내서 새 배열/객체의 키값으로 추가한다.
객체나 배열을 복사하는 데 유용하다.

//spread
const newArray = [...oldArray, 1, 2];
const newObject = {...oldObject, newProp:5};
//rest
function sortArgs(...args){
  return args.sort();
}

destructuring

구조분해할당. 배열이나 객체에 쉽게 접근할 수 있고 변수에 할당할 수 있다.

const cartoonist = ['주호민', '기안84', '침착맨']
const [a, , c] = cartoonist //변수에 할당
//a = '주호민'
//c = '침착맨'
const obj = {
  name: 'seolgi',
  age: 4
}
const printName = ({name}) => { //매개변수가 들어오면 바로 분해해서 사용
  console.log(name);
}
printName(obj); //seolgi

primitive/reference data type

원시형: 새로운 변수에 기존 변수를 할당하면 값이 저장된다.
참조형: 새로운 변수에 기존 변수를 할당하면(재할당하면) 포인터(주소)가 저장된다.
리액트에서 참조형 데이터를 다룰 때 원본의 값을 변경하지 않고 복사하는 방법을 사용해야한다.
이때 spread 연산자가 사용된다.

array function

많이 사용하는 메서드들.

map
find
findIndex
filter
reduce
concat
slice
splice
sort