모던 리액트 Deep Dive

들어가면서

해당 내용은 인강을 통해 들었던 내용이 있으나, 개념적으로 부족한 부분이 있는 것으로 판단되어, 조금 더 기본이 되는 근본적인 내용을 정리하기 위하여 모던 리액트 Deep Dive 초반 부분의 독서 및 정리한 내용이다.
필요하거나, 중요하다고 생각하는 내용만을 담고 있다. 주의!
챕터 상의 3차 목차에 대해서 제목으로 지정하며, 보고 알아둬야 하는 부분은 페이지까지 기록한다.

01 장 리액트 개발을 위해 꼭 알아야 할 자바스크립트

1.2.3 다양한 함수 살펴보기

즉시 실행 함수 43p

함수를 정의하고 즉시 실행됨 : 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다.

// 일반 함수 버전
(function (a, b) {
	return a + b
})(10, 24);

// 화살표 버전
((a, b) => {
	return a + b
	},(10, 24))

고차 함수 43p

함수를 인수로 받거나 결과로 새로운 함수를 반환시킬 수 있다. 이런 역할을 하는 함수를 고차 함수(Higher Order Function)라고 한다.

// 함수를 매개변수로 받는 대표적인 고차 함수 Array.prototype.map
const doubledArray = [1,2,3].map((item) => item * 2)

console.log(doubledArray)

// 함수를 반환하는 고차 함수의 예 
const add = function (a) {
    return function (b) {
        return a + b
    }
}

console.log(add(2)(5))

이 특징을 사용하면 함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 고차함수를 만들 수 있고, 이를 고차 컴포넌트(Higher Order Component)라고 부르며

1.2.4 함수를 만들 때 주의해야 할 사항

함수의 부수 효과(side-effect) : 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 주는 것을 의미한다.
- 순수 함수 : 부수 효과가 없는 함수
- 비순수 함수 : 부수 효과가 있는 함수
순수 함수는 외부에 어떤 영향을 미치지 않으며, 동일한 인수를 받으면 동일한 결과를 예측 가능하기에 예측 가능하며 안정적이라는 장점이 있다.
```
// 순수 함수의 예시
function PureComponent(props) {
	const { a, b } = props
	return <div>{a + b}</div>
}
```
그러나 꼭 순수 함수만 써야 하는 건 아니다. API 호출, console.log 를 찍는다던지, 외부 영향을 주는 부수효과는 반드시 필요할 때가 있고, 리액트 관점에서 본다면 부수효과를 처리하는 훅인 useEffect를 쓰되, 작동을 최소화 하는 것이 권장된다. 이를 통해 버그를 줄이고, 컴포넌트의 안전성을 높일 수 있다.
가능한 한 함수를 작게 만들어라
누구나 이해할 수 있는 이름을 붙여라 : Terser 라는 자바스크립트 코드의 맹글링 및 압축 도구 -> 한글로 변수명 함수명을 사용해도 최종 결과물에 영향을 끼치지 않는다.

1. 3. 1 클래스란 무엇인가

현재는 패러다임이 함수형 컴포넌트 체제로 돌아섰다. 하지만 레거시 코드들은 여전히 클래스 형이고, 클래스에 대한 이해는 왜 리액트가 함수형으로 패러다임을 바꾼 것인가에 대한 이해와 리팩토링 능력에 필수 불가결하다.

// js 클래스 예제
class Car {
    constructor(name) {
        this.name = name
    }

    // method
    honk() {
        console.log(`${this.name}이 경적을 울립니다.`)
    }

    // static method 
    static hello() {
        console.log('이것은 자동차 입니다.')
    }

    // setter 
    set age(value) {
        this.carAge = value
    }

    get age() {
        return this.carAge
    }
}

const myCar = new Car('haryu Car')

myCar.honk()

Car.hello() // static ok
// myCar.hello() Uncaught TypeError: myCar.hello is not a function

myCar.age = 32

console.log(myCar.age, myCar.name)

var value = Object.getPrototypeOf(myCar)
console.log(value === Car.prototype)
console.log(Object.getOwnPropertyNames(myCar))
// console.log(Object.getOwnPropertyDescriptor(myCar))
console.log(Object.getOwnPropertyDescriptors(myCar))
console.log(Object.getOwnPropertySymbols(myCar))

모든 객체는 프로토타입이라는 것이 있다. 인스턴스메서드들은 이 프로토타입에 기재가 되는 것이므로 프로토타입 메서드라고도 부른다.
직접 객체에 선언하지 않고, 프로토타입에 있는 메서드를 찾아서 실행을 도와주는 것을 프로토타입 체이닝 이라고 부른다.
현재의 myCar라는 객체는 객체 자체 어떤 메서드를 기록한게 아니라, 프로토타입까지 가서 해당하는 메서드를 발견하고 이를 수행하는 것이다.
정적 메서드는 클래스 자신을 가리키는 식으로 사용하고, 그러므로 객체가 따로 있는게 아니니 this 키워드를 쓰지 못한다.

~ 54p

모던 리액트 Deep Dive
- 들어가면서
- 01 장 리액트 개발을 위해 꼭 알아야 할 자바스크립트