[JavaScript] 💻 react완벽가이드(2)

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

udemy 강의 스타트  :)  섹션1은 강의OT로  기록은 따로 하지 않음

---

​

1. let & const 

let : 변수를 선언할때 사용

const : 상수(한번 지정하면 절대 변하지않는 값)를 선언할때 사용, 값 재할당 불가

var : 변수를 선언  (강의에서는 사용안함)

2.Arrow Function

function printMyName(name) {
console.log(name);
}
printMyname('Max'); //  "Max"

// 화살표 함수
const printMyName =(name) => {
console.log(name);
}
printMyname('Max'); //  "Max"

 인자를 전달하지않으면 빈괄호쌍으로 입력

const printMyName =() => {
console.log('Max');
}
printMyname(); //  "Max"

 1개 이상의 인수를 갖는다면 반드시 괄호로 싸줌

const printMyName =(name, age) => {
console.log(name, age);
}
printMyname('Max',28); //  "Max" ,28

리턴문은 중괄호를 생략하고 코드로 한줄로 작성할수있고, 인수가 한개일경우 괄호를 생략할수 있음

const multiply = number => number * 2;
console.log(multiply(2)); // 4

 

 

3. Exports 와 Imports

export : 다른 js 파일로 내보내기

import : export한 것 불러오기

import할때 

export default인 파일[default export]은 원하는 대로 객체이름을 정할 수 있다.

export default가 아닌 파일[named export]은 불러오려는 것의 이름을 정확하게 중괄호 안에 표시 

export default person; //  person.js에서 export
export const baseData =10; // utility.js에서 export

//app.js에 import하기
import prs from './person.js' 
import person from './person.js' 
import {baseData} from './utility.js'

// named export
import {baseData} from './utility.js'
import {baseData as bsData} from './utility.js'  
import * as bsData from './utility.js'

 

 

4. 클래스

class Person {
  constructor(name) {     //생성자함수
    this.name = name;
  }
  printMyName() {        // 메소드
    console.log(this.name);
  }; 
}

extends 로 클래스 상속받아서 쓸수 있으며, 상속받은 클래스에서 super 생성자 호출하여 사용 

class Person extends Human {
	constructor() { 
    	super();
        ...
    }
}

 

 

5. 클래스, 클래스 속성 메소드

ES7 부터 생성자함수 없이 클래스를 쓸수 있다.  화살표 함수를 사용하기 때문에  this키워드를 사용하지않아도 된다.

구문인식 오류 -> ES6/Babel 로 설정

class Person {
  name = name;
  printMyName = () => {         
  console.log(this.name);
  }; 
}

 

6. Spread & Rest Operator

어디에서 사용하는지에 따라 전개연산자 또는 나머지 매개변수라고 부른다.

1.spread_배열과 객체의 요소를 전개할때

const oldArray = [1, 2, 3];
const newArray = [...oldArray, 4, 5]; //   [1, 2, 3, 4, 5]

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

//newObject 는 name, age 키와 그에 해당하는 값을 가진 객체가 된다.

const oldObject = {
    name: 'Max'
};
const newObject = {
    ...oldObject,
    age: 28
};

2.rest operator_ 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 매개변수

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

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

 

7. 구조 분해 할당

배열 구조 분해

const array = [1, 2, 3];
const [a, b] = array;
console.log(a); //  1
console.log(b); //  2
console.log(array); //  [1, 2, 3]

객체 구조 분해

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;
person.name = 'Manu';
console.log(secondPerson); // { name: 'Manu' }

상수 person에 객체가 아닌 메모리에있는 주소를 가리키는 포인터를 저장. 그래서 복사한 secondPerson도 메모리에 동일한 객체를 가리키게 됨 

전개연산자 이용해서 복사 할수있다

const secondPerson = {
  ...person
};

console.log(secondPerson); //prints { name: 'Max' }

 

 

 

REF.

https://www.udemy.com/course/best-react/

강의를 듣고 정리한 학습노트입니다