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

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

---

DIL-week0-2_2024-03-03

| DIL 주차 | 범위 | 발표 준비 | 내용 | 오늘차 진도 | | -------- | ------ | --------- | ------------------------------ | ----------- | | 0주차 | 1, 2장 | B조: 2장 | 리액트 핵심요소와 자바스크립트 | 20p ~ 26p중 |

오늘 읽은 내용을 markdown으로 간단히 메모
읽은 시간: 5시 50분~9시
블로그 작성: Medium blog
예제 작성: ./2024-03-03_sample.js

동등 비교: props, exhaustive deps

• props의 동등 비교

  • 객체의 얕은 비교

• react의 모든 작업은 동등 비교를 기반으로 한다

  • 가상돔 & 실제돔 비교, 리랜더링, 메모이제이션 etc

• effect hook & props & dependencies란?

  • https://react.dev/reference/react/useEffect#examples-dependencies

• eslint-plugin-react-hooks의 exhaustive deps 규칙 사용에 대해서

  • https://legacy.reactjs.org/docs/hooks-effect.html

    Note
    If you use this optimization, make sure the array includes all values from the component scope (such as props and state) that change over time and that are used by the effect. Otherwise, your code will reference stale values from previous renders. Learn more about how to deal with functions and what to do when the array changes too often.

    If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument. This tells React that your effect doesn’t depend on any values from props or state, so it never needs to re-run. This isn’t handled as a special case — it follows directly from how the dependencies array always works.

    If you pass an empty array ([]), the props and state inside the effect will always have their initial values. While passing [] as the second argument is closer to the familiar componentDidMount and componentWillUnmount mental model, there are usually better solutions to avoid re-running effects too often. Also, don’t forget that React defers running useEffect until after the browser has painted, so doing extra work is less of a problem.

    We recommend using the exhaustive-deps rule as part of our eslint-plugin-react-hooks package. It warns when dependencies are specified incorrectly and suggests a fix.

    참고
    이 최적화를 사용하는 경우, 컴포넌트 범위(예: props 및 state)에서 시간이 지남에 따라 변경되는 모든 값을 배열에 포함해야 하며 해당 값들은 효과(effect)에서 사용됩니다. 그렇지 않으면 코드가 이전 렌더링에서의 오래된 값들을 참조할 수 있습니다. 함수 처리 방법 및 배열이 너무 자주 변경될 때 어떻게 해야 하는지에 대해 자세히 알아보세요.
    한 번만 실행하고 정리(clean up)하기를 원한다면(마운트와 언마운트 시), 두 번째 인수로 빈 배열([])을 전달할 수 있습니다. 이렇게 하면 React에게 당신의 효과가 props나 state로부터 의존하지 않음을 알립니다. 따라서 다시 실행할 필요가 없습니다. 이것은 특별한 경우로 처리되지 않으며 항상 의존성 배열 작동 방식으로 직접적으로 따릅니다.
    빈 배열([])을 전달하면 효과 내부의 props와 state는 항상 초기값을 가집니다. []를 두 번째 인수로 전달하는 것은 익숙한 componentDidMount와 componentWillUnmount 메타모델에 가깝지만, 일반적으로 너무 자주 효과를 다시 실행하는 것을 피하기 위한 더 나은 해결책이 있습니다. 게다가 React는 useEffect를 브라우저가 그림을 그린 후까지 연기하므로 추가 작업은 문제일 가능성이 적어집니다.
    eslint-plugin-react-hooks 패키지의 exhaustive-deps 규칙 사용을 권장합니다. 잘못된 종속성이 지정된 경우 경고하고 수정 사항 제안합니다.

원시형 타입 * 7

1. undefined

(1)선언한 변수에 값이 할당되지 않았거나, 값이 주어지지 않은 인수에 자동으로 할당되는 값입니다

2. null

명시적으로 값이 없거나, 비어있는 값이다. 특징=>typeof로 확인하면 object

3. Boolean: 참과 거짓만을 가지는 데이터 타입이다.

• 틈새상식
  • (1)falsy값? false, 0, -0, 0x0n, NaN, "", null, undefined, etc...
  • (2)truthy? {}, []도 truthy

4. Number

• -(2의 53승) -1 ~ 2의 53승-1 (-9,007,199,254,740,993 ~ 9,007,199,254,740,991)

MDN: Integer range for Number JSON으로 직렬화된 데이터를 구문 분석할 때, 이 범위를 벗어나는 정수 값은 JSON 파서가 숫자 유형으로 강제 변환할 때 손상될 수 있습니다. 가능한 해결책은 대신 문자열을 사용하는 것입니다. 더 큰 숫자는 BigInt 유형을 사용하여 표현할 수 있습니다.

• Number's static properties

  const biggestNum = Number.MAX_VALUE;
  const smallestNum = Number.MIN_VALUE;
  const infiniteNum = Number.POSITIVE_INFINITY;
  const negInfiniteNum = Number.NEGATIVE_INFINITY;
  const notANum = Number.NaN;
  
  console.log(biggestNum); // 1.7976931348623157e+308
  console.log(smallestNum); // 5e-324
  console.log(infiniteNum); // Infinity
  console.log(negInfiniteNum); // -Infinity
  console.log(notANum); // NaN
  

• 예시 코드

  const maxInt = Math.pow(2, 53) - 1;
  
  console.log("maxInt in safe range", maxInt === Number.MAX_SAFE_INTEGER);
  
  const minInt = -(Math.pow(2, 53) - 1);
  console.log("minInt in safe range", minInt === Number.MIN_SAFE_INTEGER);
  
  // 자바스크립트 number의 한계
  const outOfRangeA = biggestNum + 1;
  const outOfRangeB = biggestNum + 100;
  console.log(
    "biggestNum + 1 === biggestNum + 100",
    outOfRangeA === outOfRangeB
  );
  

• 24p 예시코드 관련 파일: ./2024-03-03_sample.js

5. Bigint

• [ES2020], 끝에 n 붙이거나, Bigint() 함수 사용

6. String

• 문자열은 변경 불가능하다. ❌ foo[0] = 'a'
• console.log(Object.getOwnPropertyDescriptors(foo));

  {
    configurable: false, // 재정의 불가능
    enumerable: true, // 열거 가능
    value: "c", // char
    writable: false // 변경 불가능
  }[]
  

• 유사 배열 객체, String and Iterator (string iterator object): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/@@iterator

7. Symbol

• [ES6] 중복되지 않는 고유한 값, 반드시 Symbel() 함수 사용
• 동일한 인수를 넘겨주더라도 동일한 값 x
• 동일한 값을 사용할 때는 Symbol.for을 활용

---

✏️ 영어공부
exhaustive /iɡˈzôstiv/: examining, including, or considering all elements or aspects; fully comprehensive.
coerce /kōˈərs/: 강제하다 to do something by using force or threats.
type coercion co·er·cion /kōˈərSH(ə)n,kōˈərZH(ə)n/