📝 백광인 2024-03-04

docs/RookieAND/dil/2024-03-04.md

@@ -0,0 +1,72 @@
+# ✒️ 리액트 개발을 위해 꼭 알아야 할 자바스크립트
+
+### ✏️ JS 의 동등성 비교
+
+- useEffect 를 사용할 때, 첫번째 인자로 넣은 setup 함수 내에 존재하는 Reactive 한 값은 반드시 deps 에 넣어야 한다.
+    - Reactive 하지 않은 값은 컴포넌트 내부에서 리렌더링이 되어도 **절대 변하지 않는 값** 이다.
+    - 반대로 Reactive 한 값은 매 렌더링마다 값이 달라질 수 있음을 의미한다.
+- 이때 각 배열에 존재하는 값들을 순회하면서 동등 비교를 시행하고 만약 값이 변경되었다면 setup 함수가 실행된다.
+- React 의 props 는 리렌더링을 유발시키는 요소이며, 이전과 현재의 props 를 비교하는 과정도 동등 비교가 담당한다. 
+
+> React 에서는 동등 비교를 어떤 식으로 진행하는가?
+
+- 기본적으로 React 에서는 `Object.is` 메서드로 두 값의 동등 비교를 시행하며, 참조형 타입의 경우 같은 메모리 주소를 참조한다면 같다고 판단한다.
+- 이렇게 두 객체의 내부 데이터를 상세히 조회하지 않고 참조된 메모리 주소만을 판별하는 동등 비교 방식이 **"얕은 비교"** 이다.
+
+### ✏️ JS 의 데이터 타입
+
+- JS 의 데이터 타입은 크게 원시 타입과 객체 타입으로 나뉜다.
+
+- 원시 타입은 객체 타입이 아닌 나머지 타입을 의미한다.
+- boolean, string, number, null, undefined, BigInt, Symbol 로 이루어져 있다.
+
+> typeof null === 'object'
+
+- JS 개발을 하다보면 흔히 마주할 수 있는 궁금증이 바로 해당 비교문이다.
+- 이는 JS 가 초기 설계되었을 때 생긴 결함으로, 이전 코드와의 호환성 문제로 아직까지 고쳐지지 못했다.
+- `undefined` 는 아직 값이 할당되지 않은 상태이며, `null` 은 명시적으로 값이 비었음을 의미한다. (값은 값이다.)
+
+> Number vs BigInt
+
+- Number 는 일반적으로 `-2^53 - 1 ~ 2^53 - 1` 사이를 표현할 수 있다.
+- 그 이상 숫자가 커질 경우 값이 달라도 true 를 반환한다.
+- 하지만 BigInt 의 경우 number 가 표현할 수 있었던 한계를 넘어설 수 있다.
+
+### ✏️ 값을 저장하는 방식의 차이
+
+- 원시 타입의 경우 값을 복사하더라도 이를 새로운 메모리 주소를 할당 받아 채우기 때문에 주소는 다르다.
+- 하지만 참조 타입 (Object) 의 경우 메모리 주소를 참조하는 형식으로 값을 넘기기 때문에 차이가 있다.
+
+### ✏️  Object.is
+
+- `Object.is` 는 ES6 에서 새롭게 정의된 동등 비교 연산이며, 기존의 비교 연산자와의 차이점은 아래와 같다.
+
+- `==` 과 `Object.is` 의 차이
+    - `==` 의 경우 양쪽이 동등한 타입이 아니라면 이를 캐스팅한다.
+    - 하지만 `Object.is` 의 경우 타입이 다르면 false 를 반환한다.
+
+- `===` 과 `Object.is` 의 차이
+    - `Object.is` 는 `+0` 과 `-0` 을 다르다고 판단하지만 `===` 는 그렇지 않다.
+    - `Object.is` 는 `Number.NaN` (혹은 그 외 NaN 이 나올 만한 케이스) 과 `NaN` 을 같다고 판단하지만 `===` 는 그렇지 않다. (NaN === NaN 은 무조건 false 다.)
+
+- 참조형 타입의 경우 두 객체가 같은 메모리 주소를 참조한다면 `true` 를 반환한다.
+
+> Object.is 조금 더 자세히 살펴보기
+
+```js
+function is(a, b) {
+    return (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y);
+}
+```
+- Object.is 는 ES6 스펙이기 때문에 ES5 이전 버전을 지원하기 위해 Polyfill 된 유틸 함수를 React 내부에서 사용한다.
+- 이를 조금 더 자세히 뜯어보면 아래와 같은 로직을 거친다.
+
+1. `x === y` 가 성립한다면, `x !== 0 || 1 / x === 1 / y` 식도 성립해야 한다.
+    1-1. `x !== 0` 인 경우
+        - x 가 0이 아니라면 y 도 0이 아니며, x === y 이므로 x 와 y 가 NaN 인 경우 외에는 항상 참이다.
+    1-2. `x === 0` 인 경우 `1 / x === 1 / y` 이어야 한다.
+        - 만약 x 가 `+0` 이라면 1 / x 는 `Infinity` 이고 `-0` 라면 `-Infinity` 이다. 따라서 x 와 y 의 부호가 다르면 false 를 반환한다.
+        - 엄격한 비교의 경우 두 케이스를 같다고 보기 때문에 이를 구별하기 위한 비교식이다.
+2. `x !== x && y !== y` 인 경우
+    - 엄격한 비교의 경우 `x !== x` 를 성립하는 조건은 x 가 NaN 인 경우 외에 없다.
+    - 따라서 `x` 와 `y` 가 둘 다 NaN 일 경우 true 를 반환하고, 그 외에는 false 를 반환한다.