진도도 제대로 못빼는 내가 스터디를 ㅋㅋ ㅠㅠㅠㅠㅠㅠㅠㅠ

이왕 블로그 만든 거 확실하게 써주 get dawn.

이 글은

모던 리액트 Deep Dive 완독 스터디

1회차를 시작할 때
읽은 책의 내용을 정리하기 위해
작성한다 ㅎ

1-4 클로저까지 읽고 정리

✨1-1 자바스크립트의 동등 비교

• 자바스크립트 데이터타입

원시타입(primitive type)

객체가 아닌 다른 모든 타입을 의미
boolean
null
undefined
number
string
symbol
bigint

객체 타입(object/reference type)

원시타입 이외의 모든 것,
object = 배열, 함수, 정규식, 클래스 등이 포함

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

원시 타입 & 객체 타입의 가장 큰 차이는
값을 저장하는 방식.

원시 타입

불변의 값을 저장

객체 타입 값 저장 방식

참조의 값을 저장

🔻또 다른 비교 공식, Object.js

== vs Object.js

==는 타입 비교를 위해 암묵적 형변환이 이루어짐.
Object.js 는 그런 거 없음.

=== vs Object.js

===와 비슷해보일 수 있으나 Object.js가 더
개발자가 기대하는 방식으로 정확히 비교됨.

---

✨1-2 함수

🔻함수란 무엇인가

작업 수행 & 값 계산등의 과정을 하나의 블록으로 감싸
실행단위로 만들어놓은 것

🔻함수 선언방식 4가지

함수 선언문

function Func() {...}

함수 표현식

const Func = function(){...}

함수 생성자

const Func = new Function()
실제 코딩에서는 잘 사용되지 않음

화살표 함수

const Func = () => {...}
constructor, arguments, this 사용불가

🔻다양한 함수 살펴보기

즉시 실행 함수

함수를 정의하고 그 순간 즉시 실행되는 함수

(function(a, b){
 ...
})(10,20) // 아규먼트를 뒤에 전달

고차 함수

함수 컴포넌트를 인수로 받아 새로운 함수 컴포넌트를 반환하는 함수

🔻함수를 만들 때 주의사항

함수의 부수효과를 최대한 억제

함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 함수의 부수효과라고 하고, 그걸 최대한 억제해서 함수 작성

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

하나의 함수에서 너무 많은 일을 하지 않도록 해라.
단일 책임 원칙 에 대한 말인 것 같다.

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

함수의 이름은 해당 기능을 모두 내포하고 있어야한다.

---

✨1-3 클래스

🔻클래스란?

특정 객체를 만들기 위한 일종의 설계도.

constructor(생성자)

객체를 생성하는 데 사용하는 메서드.
클래스 내부에 단 하나만 존재해야함. 생략 가능.

프로퍼티

프로퍼티란 인스턴스 생성 시 내부에 정의할 수 있는 속성값

class Car {
	this.name = name;
}
const MyCar = new Car("자동차") // 프로퍼티 값 자동차

getter & setter

캡슐화된 class 필드에 직접 접근을 허용하지 않는 대신
해당 메서드들로 간접적인 접근하게 함.
getter은 클래스에서 필드에 값을 가져올 때 사용,
setter은 클래스에서 필드에 값을 할당할 때 사용.

인스턴스 메서드

클래스 내부에서 선언한 메서드.
인스턴스를 생성하고 해당 인스턴스로 접근할 수 있는 메서드를 인스턴스 함수라고 하나 봄.

정적 메서드

정적 메서드는 인스턴스가 아닌 이름으로 호출할 수 있는 메서드.
인스턴스를 만들어서 사용하는 게 아니라 직접 클래스 자체에 접근해서 사용함.

상속

extands 개념, 기존 클래스를 상송받아서 자식 클래스에서 상속받은 클래스를 기반으로 확장하는 개념.

🔻클래스와 함수의 관계

ES6 이전의 자바스크립트에서는 Class 개념이 없었다.
클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것이다. 고로 생성자 함수로 매우 유사하게 재현할 수 있었다.

---

✨1-4 클로저

함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합.

간단히 말해, 클로저는 함수가 생성될 당시의 외부 변수들을 기억하고, 함수가 실행될 때에도 이 기억된 변수들에 접근할 수 있게 해주는 기능.

렉시컬 스코프?
코드가 작성된 위치에 따라 변수의 유효 범위(Scope)가 결정되는 스코프 규칙을 의미함

🔻전역 스코프

이 스코프에 변수 선언시 어디서든 호출할 수 있게 됨.

🔻함수 스코프

함수를 스코프의 기준으로 삼음
자바스크립트는 기본적으로 함수 스코프를 가지고 있음.

🔻클로저 정리

클로저는 함수형 프로그래밍의 중요한 개념.
부수 효과가 없고 순수해야한다는 목적을 달성하기 위해 적극적으로 사용되는 개념.
다만 성능에 영향을 미침.