[React 완벽 가이드] section 2 : 자바스크립트 Refresher

이 글은 udemy의 React 완벽 가이드 with Redux, Next.js, TypeScript 강좌를 바탕으로 정리한 내용입니다.

 

11. 모듈 소개

• If you already know, you can move on to the next section. (for me I have to watch :-( ... )

12. let & const

• let : 값을 수정할 수 있는 변수를 선언할 때 사용
• const : const는 한번 지정하면 절대 변하지 않는 값인 상수를 선언할 때 사용

13. Arrow Functions

function

function printMyname(name) {
  console.log(name);
}

printMyname('Max') // "Max"

function 의 기본 구조

arrow function

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

printMyname('Max') // "Max"

arrow function 의 기본 구조

const printMyname = name => {
  ...
}

인자가 1개인 경우에는 () 를 생략할 수도 있다.

const printMyname =  => { // X
  ...
}

전달 인자가 없을 경우에는 ()를 생략할 수 없다.

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

console.log(multiply(2)) //4

리턴문인 경우 {}와 return 키워드를 생략할 수 있다.

14. Exports와 Imports

default export

import person from './person.js'
import prs from './person.js'

• import 시 default에 명시된 값을 기본값으로 가져온다.
• as키워드를 통해 alias 지정하여 사용 가능하다.

named export

import {smth} from './utility.js'
import {smth as Smth } from './utility.js'
import * as bundled from './utility.js'

• import 시 중괄호에 export된 상수를 적어줘야 한다.
• 파일에 다수의 named export가 있는 경우 특수문자 *를 이용하여 파일 내 모든 것을 import할 수 있다.

15. Classes

class

class Person {
 	name = 'Max' // Property
	call = () => {...} // Method
}

• 객체를 위한 핵심 청사진
  • 하나의 모델이 되는 청사진(blueprint)를 만들고 그 청사진을 바탕으로 한 객체(object)를 만드는 프로그래밍 패턴이다. 여기서 청사진을 클래스라고 하고 이를 바탕으로 생성된 객체를 인스턴스라고 한다.
• 클래스는 class 키워드로 정의. 프로퍼티와 메소드를 가질 수 있다.
  • method : 클래스나 객체에 정의한 함수
  • property : 클래스나 객체에 정의한 변수

usage

const myPerson = new Person()
	myPerson.call()
	console.log(myPerson.name)

• new 키워드로 클래스의 인스턴스 생성한다.

Inheritance

class Person extends Master // Inheritance  

• 클래스에서 상속을 사용할 수 있는데, 즉 다른 클래스에 있는 프로퍼티와 메소드를 상속하면 잠재적으로 새로운 프로퍼티와 메소드를 추가한다는 뜻이다. (That's the idea and classes also support inheritance.Which means you have another class which you inherit from taking all its properties and methods and potentially adding new properties and methods)

Example

class Human {
  constructor() {
    this.gender = 'male'
  }
  printGender() {
    console.log(this.gender);
  }
}

class Person extends Human {
  constructor() {
    super();
    this.name = 'Max'
  }
  
  printMyName() {
    console.log(this.name);
  }
}

const person = new Person();
person.printMyName(); // "Max"
person.printGender(); // "male"

• extends : 를 이용하여 Human 클래스를 상속받아 확장하였다.
• super 생성자 : 다른 클래스를 확장하고 내부에서 사용하기 위해선 생성자 함수 안에 super 메소드를 필수적으로 추가해야 한다. 위 코드에서 super를 명시해주지 않을 경우 에러가 발생한다.

class Person extends Human {
  constructor() {
    super();
    this.name = 'Max'
    this.gender = 'femal'
  }
}

const person = new Person();
person.printMyName(); // "Max"
person.printGender(); // "femal"

→ this.gender = 'femal' 추가시 "femal" 이 출력된다.

클래스가 자바스크립트 객체를 위한 청사진이라는 것을 꼭 이해해야 하며, 클래스는 생성자 함수와 비슷하고 상속은 프로토타입과 비슷하다.

16. Classes, Properties & Methods

myProperty = 'value';
myMethod = () => {...}

• 프로퍼티의 값으로 화살표 함수를 사용한다.
• this 키워드를 사용하지 않아도 된다.
• 중요) 이를 위해서는 ES6/Babel 문법을 사용해야 한다.

Example

class Human {
  gender = 'male'
  printGender = () => {
    console.log(this.gender);
  }
}

class Person extends Human {
    name = 'Max'
    gender = 'femal';

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

const person = new Person();
person.printMyName(); // "Max"
person.printGender(); // "femal"

17. Spread & Rest Operators (...)

• 점 3개(...)로 이루어진 연산자로, 사용용도에 따라 구분된다.

Spread

• Used to split up array elements OR object properties

const newArray = [...oldArray, 1, 2]
const newObject = {...oldObject, newProp:5}

Rest

• Used to merge a list of function arguments into an array

function sortArgs(...args) {
	return args.sort()
}

Example

# Spread
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4]
const newNumbers2 = [numbers, 4]

console.log(newNumbers); // [1, 2, 3, 4]
console.log(newNumbers2); // [1, 2, 3, 4]


const person = {
  name : 'Max'
}

const newPerson = {
  ...person,
  age: 28
}

console.log(newPerson); // [object Object] { age: 28, name: "Max"}

# Rest

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

→ return 키워드 없이 구문을 한줄로 작성할 수도 있음.

18. Destructuring (구조분해 할당)

// 배열의 destructuring => 변수 a, b에 각각의 값을 할당
[a, b] = ['Hello', 'Test'];
console.log(a); // Hello
console.log(b); // Test

// 객체의 destructuring => 객체간 동일한 key를 가진 값을 대상으로 함
{name} = { name:'Test', age:27 };
console.log(name); // Test
console.log(age); // undefined

• Easily extract array elements or object properties and store them in variables
• Spread & Rest Operators와 비슷해 보이지만 다름!
  • Spread : 모든 원소와 프로퍼티를 가져와 객체나 배열에 전달
  • Destructuring : 원소 혹은 프로퍼티 하나만 가져와 변수에 저장

example

19. reference & primitive types

값 복사

const number = 1;
const number2 = number;
console.log(number2); // 1

객체 생성 후 할당 시 주소값인 포인터를 복사

→ secondPerson 출력해보면 secondPerson 값도 Manu로 바뀌어 있다.
→ 리액트에서 많이 하는 실수 중 하나로 이럴 때는 Spread 를 활용할 수 있다.

Spread의 활용

→ secondPerson을 출력해보면 기존에 할당되었던 'Max' 값이 유지되고 있다.

20. Array Functions

중요한 배열 함수

• filter()
• map()
• sort()

Example

const numbers = [1,2,3]

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

console.log(numbers); // [1, 2, 3]
console.log(doubleNumArray) // [2, 4, 6]

21. 마무리 A Refresher

• 차세대 자바스크립트와 중요한 몇몇 자바스크립트의 개념에 대해 전반적으로 살펴보았다.

22. 차세대 JavaScript - 요약

• 11 ~ 22 내용

23. JS Array functions

JS Array functions 샬펴보기

🤟 느낀점

자바스크립트 개념을 한번 더 전체적으로 정리할 수 있어서 좋았다.  영어 강의로 들어보려고 했는데, 생각보다 쉽지 않네.. ㅠㅠ 계속 해석본을 찾아보게 된다... 앞으로 더 코드와 영어에 익숙해지도록 하자. 화이팅!~~

 

---

https://www.udemy.com/course/best-react/
https://velog.io/@smj0818/%EA%B0%9D%EC%B2%B4%EC%A7%80%ED%96%A5-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8