DIL: 모던 리액트 딥 다이브, 1주차-1

스터디: 월간 CS, https://github.com/monthly-cs/2024-03-modern-react-deep-dive
오늘 진행: 개인공부

---

DIL-week1-1_2024-03-04

| DIL 주차 | 범위 | 내용 | 오늘차 진도 | | -------- | ------ | ------------------------------ | ----------- | | 1주차 | 1, 2장 | 리액트 핵심요소와 자바스크립트 | 26p중~59p |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 9시반~12시 빠르게 읽기~!

객체

• 객체는? 참조 타입이다~ reference type이다~
• 객체는? 변경 가능하다~ writable이다~
• 객체는? 복사할 때 참조를 전달한다~ !==~

Object.is

• [ES6(ES2015)] 얘도 객체 비교는 !==
• Object.is({},{}) // false

리액트의 동등 비교는 Object.is다?!?

• objectIs: ES6 폴리필

function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) // eslint-disable-line no-self-compare
  );
}

const objectIs: (x: any, y: any) => boolean =
  typeof Object.is === "function" ? Object.is : is;

export default objectIs;

• shallowEqual: 객체 간 비교(Object.is + 배열 길이 + 키 비교 + 값 비교)
  • Object.is와 달리 => React의 shallowEqual은 참조가 다른 객체도 1 depth까지는 비교가 가능하다~

export default function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) return true;

  if (
    typeof objA !== "object" ||
    objA === null ||
    typeof objB !== "object" ||
    objB === null
  )
    return false;

  const keysA = Object.keys(objA); // 키
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) return false; // 배열 길이 비교

  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keyA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      !is(objA[currentKey], objB[currentKey])
    )
      return false;
  }

  return true;
}

• JSX props는 객체다~ 얕은 비교를 한다~
  • 즉, props에 또 다른 객체를 넘겨준다면~? 예상치 못하게 작동할 수 있다~~
• 자바스크립트의 특징 => 객체 비교의 불완전성, 얕은 비교만 사용해서 필요한 기능을 구현하고 있다.

함수

• 함수란?
  • 작업을 수행하거나, 값을 계산하는 등의 과정을 => 하나의 블록으로 감싸서 실행 단위로 만든 것

1. 함수 선언문은? 문 statement이다~ 그런데?? 코드 문맥에 따라 표현식으로도 사용될 수 있다~ (JS 엔진은 못 말려~)

const sum = function sum(a, b) {
  return a + b;
};

sum(10, 24); // 34

2. 함수 표현식은? 변수에 할당, 함수명을 주로 생략

• 일급 객체: 매개변수, 반환값, 할당 다 가능

3. Function 생성자는? 함수 몸통이 문자열, 클로저 생성되지 않음
4. 화살표 함수는? 생성자 함수로 x, arguments 없음

• this란? 자신이 속한 객체나, 자신이 생성할 인스턴스를 가리키는 값
• 화살표 함수의 this는? 상위 스코프 this~ => 별도의 작업 없이 상위 this에 접근

IIFE, Immediately Invoked Function Expression

• 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용
• 캡슐~

Higher Order Function / Higher Order Component

• 고차 함수~ 일급 객체~ 고차 컴포넌트~

순수 함수 Pure Component

• 부수 효과 side-effect 가 없는 함수
• useEffect를 줄이자 진짜로

함수를 작게 만들어라

• max-lines-per-function, 50줄~
• Malcolm Douglas McIlroy => Do One Thing and Do It Well. 함수는 하나의 일을, 그 하나만 잘 하면 된다.

클래스

• React 16.8 이전에는? 클래스 컴포넌트
• [ES2019] #으로 private
• Typescript: private, protected, public
• 인스턴스 메서드 == 프로토타입 메서드

const myCar = new Car("차차차");

Object.getPrototypeOf(myCar) === Car.prototype; // true
myCar.__proto__ === Car.prototype; // true

• 📌 __proto__를 쓰면 안된다 => 왜냐? typeof null === 'object' 처럼, 의도된 표준은 아니지만 과거 브라우저의 호환성을 지키기 위해서만 존재하는 기능이기 때문임
• => Object.getPrototypeOf를 쓰자
• prototype chaining 예시 => Object의 toString()

클래스와 함수

• ES6 이전에는 프로토타입으로 클래스 작동 방식을 구현했음
• 바벨 트랜스파일링: _createClass 라는 헬퍼 함수를 만들어 => 클래스와 동일한 방식으로 동작하도록 함
  • prototype 기반, 생성자 함수로 유사하게 재현 / 클래스는 syntactic sugar

---

영어
Strict Equality Operator, 동등 연산자 / Equality Operator, 일치 연산자