diff --git a/docs/RookieAND/dil/2024-03-04.md b/docs/RookieAND/dil/2024-03-04.md new file mode 100644 index 0000000..0cf21dc --- /dev/null +++ b/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 를 반환한다.