[1주차] 자바스크립트의 동등 비교, 함수, 클래스 | 모던 리액트 딥다이브 공부

1.1 자바스크립트의 동등 비교

1.1.1 자바스크립트의 데이터 타입

원시타입

• 객체가 아닌 모든 타입, 메서드를 갖지 않음
• boolean
  • 0, NaN, ””, null, undefined 모두 falsy 한 값
• null
  • 명시적으로 비어 있음을 나타내는 값
• undefined
  • 선언됐지만 할당되지 않은 값
• number
  • 최대 2^53-1저장 가능
• string
  • 템플릿 리터럴(백틱``사용, 줄바꿈0, 표현식0)
• symbol
  • 고유한 값을 나타낼 때 사용, Symbol()함수 사용
• bigint
  • number의 숫자 크기 제한을 극복, ES2020

객체타입

• object
  • 원시 타입 이외의 모든 것
  • 배열, 함수, 정규식, 클래스
  • 참조를 전달 (=참조 타입)

1.1.2 값을 저장하는 방식의 차이

• 원시 타입
  • 변하지 않는 형태의 값으로 저장
• 객체 타입
  • 프로퍼티를 삭제, 추가, 수정 0 (변경가능한 형태의 값)
  • 값 복사 시, 참조를 전달
  • 즉, 해당 변수가 가르키는 주소가 중요

  var hello = {
  	greet: "안녕"
  }
  
  var hi= {
  	greet: "안녕"
  }
  
  // 동등 비교
  console.log(hello === hi) // false
  
  // 원시값인 내부 속성값("안녕"이라는 string,즉 원시값) 비교
  console.log(hello.greet === hi.greet) // true
  
  var copy = hello
  
  console.log(copy === hello) // true
  
  

1.1.3 자바스크립트 비교 방법

1. == : 강제 형변환(type casting)을 한 후 비교
2. ===
3. Object.is : “===” + 개발자가 기대하는 방식으로 정확히 비교

5 == "5" // true
5 === "5" // false

-0 === +0 // true
Object.is(-0, +0) // false

Number.NaN === NaN // false
Object.is(Number.NaN, NaN) // true

1.1.4 리액트에서의 동등 비교

• 폴리필(Polyfill) 이란?
  • 변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트 [참고]
• shallowEqual 사용: Object.is로 먼저 비교 → 객체 간 얕은 비교   객체의 첫 번째 깊이에 존재하는 값만 비교 (1 depth)

// Object.is는 참조가 다른 객체에 대해 비교가 불가능.(주소가 다름)
Object.is({hello:"world"}, {hello: "world"}) // false

// 반면 리액트 팀에서 구현한 shallowEqual 은 객체의 1 depth 까지 비교 0
shallowEqual({hello:"world"}, {hello: "world"}) // true

// 객체의 2 depth 비교 x 
shallowEqual({hello: {hi: "world"} }, {hello: {hi: "world"} }) // false

• Why? 객체의 얕은 비교까지만 구현했을까
  • 리액트에서 사용하는 JSX props는 객체이고, 여기에 있는 props 만 일차적으로 비교하면 ok
  • [예시 with React.memo]
  • props가 깊어지는경우 원하는대로 작동하지 않을 뿐더러 성능에 악영향.
  • 위 개념 이해 필수! 함수형 컴포넌트에서 사용되는 훅의 의존성 배열의 비교, 랜더링 방지를 넘어선 useMemo와 useCallback의 필요성, 렌더링 최적화를 위해 꼭 필요한 React.memo의 사용을 위해..

---

1.2 함수

1.2.1 함수란?

• 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것
• 일급객체
  • 다른 객체들에 일반적으로 적용 가능하는 연산을 모두 지원하는 객체
  • 서로 매개변수 0, 반환값 0 , 할당 0

1.2.2 함수를 정의하는 4가지 방법

함수 선언문

• 표현식이 아닌 일반문(statement)    무언가 값을 산출하는 구문
• function add(a, b){ return a + b }

함수 표현식

• 함수를 변수에 할당한 표현식
• const sum = function (a, b){ return a + b } sum(10, 20) // 30

호이스팅 여부에 따른 함수 선언식과 표현식 차이

• 함수의 호이스팅이란?
  • 함수 선언문이 마치 코드 맨 앞단에 작성된 것 처럼 작동하는 자바스크립트의 특징
  • 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업
• 변수의 호이스팅이란?
  • 호이스팅되는 시점에서 var는 undefined로 초기화 (런타임 이전)
  • 할당문이 실행되는 시점, 즉 런타임 시점에 함수가 할당되어 작동
• 호출을 하고 함수를 작성할 경우
  • 함수 선언문은 에러 x, 함수 표현식은 에러 0

Function 생성자

• 사용 x

화살표 함수

• ES6 추가된 문법
• 화살표 함수와 일반 함수의 차이점
  • constructor, arguments 여부
  • this 바인딩
    • 자신이 속한 객체나 자신이 생성할 인스턴스를 가리키는 값
    • 일반함수 - 함수를 정의할 때 x, 함수가 어떻게 호출되느냐에 따라 동적으로 결정됨
    • 화살표함수 - this는 상위 스코프로 이미 결정되어있음.

1.2.3 함수 사용 방식에 따른 종류

즉시 실행 함수 (=IIFE)

• 함수를 정의 하는 순간 즉시 실행되는 함수, 단 한번만 호출
• 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프 이용 가능
• 리뷰어가 이 코드를 봤을 때, 다시 호출되지 않는 다는것을 알기 때문에 리팩터링에도 도움
• (function add(a, b){ return a + b })(10, 20); // 30 ((a, b) => { return a + b }, )(10, 20) // 30

고차 함수

• 함수가 일급 객체인 특징을 활용
• 함수 안에 함수를 넣는 것, 함수를 인수로 받아 쓰는 경우, 함수를 리턴값으로 반환하는 경우
• ex) map 함수

1.2.4 함수를 만들 때 주의 사항

1. 함수의 부수 효과를 최대한 억제하라

함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것

• 순수 함수는 부수효과가 없고 어떤 상황이던지 동일한 인수를 받으면 동일한 결과를 반환해야한다.
• 리액트의 관점에서 본다면, 부수 효과를 처리하는 훅인 useEffect의 작동을 최소화하는 것이 좋다. 그것은 함수의 역할을 좁히고, 버그를 줄이며, 컴포넌트의 안정성을 높일 수 있다.

2. 가능한 한 함수를 작게 만들어라

• 하나의 함수에서 너무나 많은 일을 하지 않게 하는 것이 중요하다. 함수는 하나의 일을 잘하면 된다. 그것이 함수의 원래 목적인 재사용성을 높일 수 있는 방법이다.

3. 누구나 이해할 수 있는 이름을 붙여라

1.3 클래스

1.3.1 클래스란?

• 특정한 객체를 만들기 위한 일종의 템플릿
• 현재 함수가 하는 일을 예전에는 클래스로 함
• 클래스의 특징들
  • 프로토타입과 프로토타입 체이닝 때문에 직접 선언하지 않고 클래스에 선언한 hello () 메서드를 호출 0, this도 접근 0 [참고]

class Car {
	// constructor: 최대 1개만 사용 가능, 생략 0 
	constructor (name) {  
		this.name = name
	}
}

// 프로퍼티의 값 넘겨주기
const myCar = new Car("자동차") 
-------------------------

class Car {
	constructor (name) {  
		this.name = name
	}

	// 값을 가져올 때
	get getterF(){
		return this.name[0]
	}
	
  // 값을 할당할 때
	set setterF(){
		this.name = [char, ...this.name.slice(1)].join('')
	}
}

const myCar = new Car("자동차") 
myCar.getterF // 자
myCar.setterF = "차"
console.log(myCar.name) // 차동차
---------------------------

class Car {
	constructor (name) {  
		this.name = name
	}
	
	// 인스턴스 메서드 정의
	hello(){
		console.log(`나는 ${this.name}이다.`)
	}
	
	// 정적 메서드
	// this에 접근x, 유틸 함수로 많이 사용
	static hi(){
		console.log("안녕!")
	}	
}

const myCar = new Car("자동차") 
// 인스턴스 메서드 선언
myCar.hello() // 나는 자동차이다. 

// 인스턴스 메서드는 프로토타입 메서드라고도 불린다. 
Object.getPrototypeOf(myCar) // {constructor: f, hello: f}

myCar.hi() // TypeError
// 정적 메서드는 이름으로 호출,
Car.hi() // 안녕!

• 상속

class Car {
	constructor(name) {  
		this.name = name
	}
	
	honk(){
		console.log(`${this.name} 빵빵`)
	}
}

class Truck extends Car {
	constructor(name) { 
		// 부모 클래스 Car의 constructor 호출
		super(name)
	}
	
	load(){
		console.log("짐 싣는중")
	}
}

const myCar = new Car("자동차") 
myCar.honk() // 자동차 빵빵
myCar.load() // 짐 싣는중

 

 

*** 읽을 때 주의할 css

1. [링크]   

2. 밑줄 밑줄에 대한 개념 설명

3. h1제목

4. h2제목