본문 바로가기
Udemy - React완벽가이드

Javascript 리마인드

by Hanachoi 2023. 1. 29.

# let vs Const

  • 자바스크립트에는 원래 var만 잇었는데 ES6부터 let과 const가 추가되었다.
  • let : 값을 수정할 수 있는 변수를 선언할때 사용 Variable values
  • const : 한 번 지정하면 절대 변하지 않는 값인 상수를 선언할때 사용, 새로운 값을 할당할 수 없음 Constant values

 

# Arrow Functions

  • 전통적으로 쓰던 방식과 다르게 function 키워드를 생략하기 때문에, 일반 함수보다 짧다
function myFuc(){
 ...
} // conventional funcion declare


const myFuc=()=>{
...
}
  • 화살표 함수는 키워드 this로 인해 생겼던 많은 문제들을 해결해주는 장점이 있음
  • JS에서 this가 항상 우리가 원하는 객체를 참조하지 않는다는 것을 알 수 있다. 화살표 함수를 사용하면 해결 가능
  •  화살표 함수에서는 딱 하나의 인수를 받는 경우 ()를 생략할 수 있다. 인수가 없다면 생략은 불가능
  • 코드가 짧다면 한줄에 모두 올려쓰기도 가능하다. 이 경우에는 return을 생략가능
const printMyname= ()=>{
	console.log('Max');
}

printMyname();

const multiply = number => number*2 // 한줄에 모두써서 return을 생략함

 

# Exports & Imports

  • 우리는 파일을 여러개로 나눌 수 있고 html 파일에 올바른 순서로 코드를 가져오기만 하면 된다.
  • statemenf를 import 하는 모듈이라는 것은 자바스크립트 파일 안에 있는 것으로, 다른 파일에서 컨텐츠를 불러 올 수 있고 자바스크립트 파일은 그 컨텐츠가 어디에서 온것인지를 알고 있다.
  • 한 번에 여러개를 export 하는 것도 가능하다.
  • person.js 파일에서 쓰고 있는 default 키워드는 다른파일에서 파일을 import 할때 항상 default export가 냅낸 것을 기본값으로 가져온다는 것을 의미한다 
//person.js
const person = {
	name : 'max'
}

export default person
// export키워드로 어딘가로 파일을 내보낼 수 있음

//utility.js
export const clean = ()=>{...}
export const baseData = 10;
// 여러가지를 export 하는것도 가능함
  • 다른 곳에서 파일을 가져오기 위해서는 import 키워드가 필요하다.
  • person.js 파일에서 가져온 person 데이터는 default 로 설정이 되어있으니 항상 그걸 기본값으로 가져온다. 이름은 마음대로 설정이 가능하다. 
//app.js
import person from './person.js'
import prs from './person.js'

//imports default and ONLY export of the file Name in the receiving file is up to you 

import {baseData} from './utility.js'
imort {clean} from './utility.js'
  • 하지만 utility 파일에서 불러온 것은 두개의 다른 상수를 불러오는데 그 파일에서 어떤 특정한 것을 가르키기 위해서 {}curly brace를 사용해준다.  이걸 named export라 부른다. 이름으로 어떤 것을 불러오기 때문이다. 
  • baseData와 clean이라는 특정하게 이름이 지어진 애들을 불러오지만 어떤 것도 default 설정이 되어있지 않다. 그래서 우리가 원하는걸 정확하게 자바스크립트가 알게 하려면 정확한 이름을 중괄호 사이에 입력해야 한다.
  • {baseData , clean } 처럼 콤마를 사용해서 한 괄호에 넣을 수도 있다. 
  • default export는 import 할 때 이름을 바꿔도 되지만 named export는 중괄호 안에 정확한 이름을 넣어줘야 한다. 하지만 import {smth as Smth} from './utility.js' 처럼 as 키워드를 써서 자유롭게 선택할 수 있는 별칭을 할당할 수도 있다. 
  • named export 에서는 특수문자 * 를 사용해서 모든것을 import 할수도 있다. import *as bundled from './utility.js'
  • 또 무엇이든 export 하는 것에 접근하기 위해서는 bundled.baseData, bundled.clean 처럼 쓸 수도 있다.

 

#클래스 이해하기

  • 클래스는 객체를 위한 청사진 같은 것이다
  • class 라는 키워드로 선언할 수 있고  아래의 name 과 같은 property, call과 같은 Method를 가질 수 있다. 
  • 메소드는 클래스에 정의 한 함수이고 프로퍼티는 클래스에 정의한 변수이다. 
  • 클래스로 자바스크립트 객체를 생성할 수 있다. 
class prson {
  name= "max" //property
  call =()=>{...} // method
}
// usage (constructor funcions anyone)

const myPerson = new Person()
myPerson.call()
console.log(myPerson.name)
  • 클래스에서는 상속(inheritance)를 사용할 수 있다. 만약 다른 클래스에 있는 프로퍼티와 메소드를 상속하면 잠재적으로 새로운 프로퍼티와 메소드를 추가한다.
class Person extends Master
  • 또 익숙한 것으로 프로토타입이 있다 .
  • class를 만들면 이제 프로퍼티를 사용할 수 있고, 가장 간단한 프로퍼티의 형태는 생성자함수(constructor)를 추가하는 것이다 . constructor is default function. 어떤 클래스에도 추가해서 클래스의 객체를 생성할 때마다 실행될 것이다.
  • 메소드는 메소드의 이름 다음에 중괄호를 넣어서 만들 수 있다. 
class Person{
	constructor() {
    	this.name = 'Max'; // property
    }
    printMyName(){
    	console.log(this.name); // method
    }
}

const person = new Person();
person.printMyName(); // max출력됨
  • 클래스는 상속을 할 수있다.
  • 또다른 클래스를 만들어서 다른 클라스에 상속시킬 때는 extedns_____를 붙여준다. 또 상속을 사용할 때는 생성자 함수 안에 super()메소드를 추가해야한다. 
class Human {
	constructor(){
      this.gender = 'male';
    }
    printGender(){
    	console.log(this.gender)
    }
}

class Person extends Human{ // 상속을 위해 extends 사용
	constructor() {
    	super(); // 상위클래스의 생성자 함수를 실행하기 위해 넣음
    	this.name = 'Max'; // property
    }
    printMyName(){
    	console.log(this.name); // method
    }
}

const person = new Person();
person.printMyName();
person.printGender();
  • 하위클래스에서 상위클래스의 값을 덮어쓰면 하위클래스의 값으로 출력된다. 

 

#클래스 속성 및 메서드

  • Properties are like "Variables attached to classes/ objects" 클래스와 오브젝트에 추가되는 변수 같은 것 
  • 기존 문법에서는 construtor를 통해서 프로퍼티를 만들었지만 최신 문법에서는 바로 할당이 가능하다. 
//ES 6 
constructor(){
	this.myProperty = 'value'
}

//ES7
myProperty = 'value' 
// 최신문법에서는 생성자함수 없이 바로 호출 가능
  • Methods are like "functions attached to classes/objects"클래스와 오브젝트에 추가되는 함수같은것
  • 방식은 크게 다른 것이 없지만 화살표 함수를 이용하면 this 키워드를 사용하지 않아도 되서 좋다. 
//ES 6
myMethod(){...}

//ES 7 
myMethod=()=>{...}
// arrow function을 이용해서 생성
  • 이렇게 신 문법으로 위에서 만든 클래스를 바꿀 수 있다. 
  • javaScript 에서 ES6 / babel 로 변경해줘야 에러없이 사용 가능 
class Humen {
	gender ='male'; // constructor 삭제
    
    printGender = ()=>{
    	console.log(this.gender)
    }
}

class Person extends Human {
	name = 'max'; // 기존에 있던 this 삭제, super 삭제, constructor삭제
    gender = 'female';
    
    printMyName =()=>{
    	console.log(this.name);
    }
}

const person = new Person()
person.printMyName();
person.printGender();

 

 

#스프레드 및 나머지 연산자

  • ...  점 세개로 된 녀석인데 사용법에 따라 spread와 rest로 나뉘어 불린다.
  • Spread : Used to split up array elements OR object properties 배열의 원소나 객체의 프로퍼티를 나누는데 사용된다. 배열이나 객체를 펼쳐 놓을 수 있다.  
  • 예를들어, 기존에 우리가 oldArray라는 배열을 가지고 있는데 거기에 1, 2 를 추가해서 새로운 newArray를 만들고 싶다면 스프레드 연산자를 통해 만들 수 있다.
  • object에서도 동일하게 기존 oldObject를 가져와 거기에 새로운 키 값을 넣어줄 수 있다. 
const newArray= [...oldArray , 1,2]

const newObject = {...oldObject, newProp:5}
  • 중복되는 값이 있다면 덮여 씌어진다. 

 

  • Rest : used to merge a list of function arguments into an array 함수의 인자들을 배열로 합치는데 사용됨. 
  • 사용 빈도는 낮지만 함수에서 사용됨. 
fuction sortArgs(...args){ // 1개이상의 매개변수를 받으면 모두 배열로 통합됨
	return args.sort()
}
  • 스프레드 오퍼레이터 예시
const number = [1,2,3];
const newNumbers= [...number, 4] 

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

//만약에 그냥 ...없이 그냥 number를 사용하면
const newNumbers =[number,4]
console.log(newNumbers) // [[1,2,3], 4]
const person ={
	name: 'Max'
}

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

console.log(newPerson); // newperson{age : 28, name:'Max'}
  • 레스트 오퍼레이터 예시 
const filter = (...args) =>{
	return args.filter (el=>el ===1); // 매개변수가 1이면 리턴해주는 필터를 걸었음
}

console.log(filter(1,2,3)); // [1] 1이 들어있는 배열이 나옴

 

#구조분해할당(Destructuring)

  • Easily extract array elements or object properties and store them in variables 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해준다. 
  • 스프레드와 비슷하게 들리지만, 디스트럭쳐링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장한다. (스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체에 넣어줌)
//Array Destructuring 
[a,b] =['hello','Max']
console.log(a) //Hello
console.log(b) //Max

//Object Destructuring
{name} ={name:'Max', age:28}
console.log(name) //Max
console.log(age) // undefined
  • 배열 디스트럭쳐링 예시
// numbers 에서 1,2만 가져옴
const numbers = [1,2,3];
[num1,num2] = numbers;

console.log(num1,num2) // 1,2

//numbers에서 1,3만 가져옴
[num1, ,num3] = numbers;
console.log(num1,num3) // 1,3

 

 

#참조형 및 원시형 데이터 타입 ★★★

  • 숫자, 스트링, 불리안 등 같은 원시형 타입은 값을 그대로 복사해와서 진짜 복사본을 만들어 준다.
  • 재할당하거나 변수를 다른 변수에 저장할 때마다 값을 복사해온다. 
const number = 1;
const num2 = number; // 

console.log(num2) //1
  • 객체나 배열은 참조형 타입이다. 
  • 아래처럼 코드를 작성하면 person과 secondPerson은 같은 값을 출력하지만 사실 객체 person을 그대로 복사해 온 것은 아니다.
  • 대신에 객체 person은 메모리에 저장되어 있고, 상수person에는 메모리에 있는 주소를 가리키는 포인터를 저장한다. 그래서 secondPerson에 person을 할당하면 포인터가 복사된다.  
const person = {
	name : 'Max'
};

const secondPerson = person;

console.log(secondPerson) // {name : 'Max'}
  • 이렇게 두개의 객체가 같은 포인터를 가지고 있다면, 기존에 있던 person의 이름이 바뀐 뒤 secondPerson을 다시 호출해도 값은 person에 있는걸 그대로 받아 올 수 있다.
const person={
	name : 'Max'
};

const secondPerson = person;

person.name = 'Manu'; //person의 이름을 바꾸고

console.log(secondPerson) // {name : 'Manu'} // secondPerson을 호출했지만 person과 동일한 값을 가져옴
  • 이런 현상은 리액트에서 예상치 못했던 결과를 초래할 수도 있기 때문에 아주 중요한 개념이다.
  • 만약 객체나 배열을 이렇게 복사한다면, 한 앱에 있는 주소에서 객체를 조작할 수도 있기 때문이다. 그리고 실수로 앱의 다른 주소에 있는 같은 객체를 다르게 사용하도록 조작할 수도 있다. 

 

  • 변경할 수 없는 방법으로 복사하는 법  : 스프레드 연산자를 사용한다
const person={
	name : 'Max'
};

const secondPerson = { // 스프레드를 사용하면 포인터가 아닌 진짜 복사본을 생성할 수 있다. 
	...person
};

person.name = 'Manu'; 

console.log(secondPerson) // {name : 'Max'} 기존에 복사해온 person의 값 그대로 출력된다
  • 꼭 기억해야 할 것은 값을 재할당 하는 경우는 value가 아닌 pointer / reference를 복사해오는 것이고, 진짜 복사를 제대로 해오고 싶다면 새로운 객체를 생성해서 전체 객체를 복사하는게 아니라, 프로퍼티를 복사해 오는 것이다.

 

#배열 함수 새로고침

  • 자주보게 될 배열 함수로 filter / sort/ map이 있다. 
  • map은 새로운 배열을 리턴해준다.
const numbers = [1,2,3]

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

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

 

 

'Udemy - React완벽가이드' 카테고리의 다른 글

리액트 state 및 이벤트 다루기  (0) 2023.02.18
컴포넌트 구성 분할  (0) 2023.02.13
JSX  (0) 2023.02.03
Basic of React  (1) 2023.01.30
Intro React  (0) 2023.01.26

댓글