feat : 2024-03-04 (root-zero-o)

docs/root-zero-o/DIL/2024-03-04.md

@@ -0,0 +1,126 @@
+### 2024-03-04
+- 공부 범위 : 1.1 동등비교 ~ 1.2 함수
+- 공부 시간 : 퇴근 후 20:00 ~ 22:00
+> 간접적으로 얕은 비교라고만 알고 있던 의존성 배열에서 내부적으로 shallowEqual을 사용해 Object.is 와 순환을 통해 비교한다는 점이 재밌었습니다.
+
+
+<br/>
+<br/>
+
+
+
+# 1. 리액트 개발을 위해 꼭 알아야 할 자바스크립트
+
+
+## 1.1 자바스크립트의 동등비교
+
+### 자바스크립트의 데이터 타입
+
+- 원시 타입(primitive type)
+
+  - undefined : 선언되었지만 할당되지 않은 값
+  - null : 명시적으로 비어 있음을 나타내는 값. ```typeof``` 로 확인하면 object가 리턴된다.
+  - boolean : true, false 만을 가질 수 있는 데이터 타입
+  - number : 정수, 실수 구분 없는 숫자
+  - bigInt : number의 한계를 넘어 더 큰 숫자를 저장할 수 있게 해준다. 끝에 n을 붙이거나 ```BigInt``` 함수를 사용한다.
+  - string : 텍스트 타입의 데이터
+  - symbol : 중복되지 않는 고유한 값을 만들기 위해 사용한다. ```Symbol()```로 생성한다.
+
+- 객체 타입(reference type)
+
+   - 7가지 원시 타입 이외의 모든 것
+
+   - 특징
+      - 원시 타입은 불변 형태의 값으로 저장 / 객체 타입은 변경 가능한 형태로 저장
+      - 원시 타입은 값을 복사 / 객체 타입은 값이 아닌 참조를 전달
+
+### Object.is
+
+- 인수 두 개가 동일한지 확인하고 반환하는 메서드
+- 형변환을 하지 않는다.
+- ```===``` 로 정확히 비교할 수 없는 특이한 케이스를 비교할 수 있다. (예: ```-0 === +0``` 은 true, ```object.is```는 false 반환)
+- 객체 비교는 동일하다.
+
+### 리액트에서의 동등비교
+- 리액트에서는 ```Object.is```를 사용한다.
+- ShallowEqual : ```Object.is```를 사용해 한 번 비교한 뒤, 순회를 통해 1 depth까지 비교한다.
+```javascript
+function shallowEqual(objA: mixed, objB: mixed){
+  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 = keysA[i]
+    if(!hasOwnProperty.call(objB, currentKey) || !is(objA[currentKey], objB[currentKey])){
+      return false
+    }
+  }
+  return true
+}
+```
+- JSX props는 객체 -> props 값을 얕은 비교하여 값이 변했을 때 렌더링 수행
+- 리액트는 얕은 비교까지만 구현 -> props에 더 깊은 객체를 넣으면 memo가 제대로 동작하지 않는다
+
+---
+
+<br/>
+
+## 1.2 함수
+
+### 함수란?
+- 작업을 수행하거나 값을 계산하는 드의 과정을 표현하고, 이를 하나의 블록으로 감싸 실행 단위로 만들어 놓은 것
+
+- 함수 선언문
+     - 함수 호이스팅이 일어난다.
+```javascript
+function add (a,b){
+  return a + b;
+}
+```
+
+- 함수 표현식
+  - 할당하려는 함수의 이름을 생략한다.
+  - 함수를 변수에 할당하기 때문에 변수 호이스팅이 일어나 런타임 이전에 undefined로 초기화되고, 런타임에 함수가 할당된다.
+
+- Function 생성자
+  - 권장되지 않는다.
+
+- 화살표 함수
+  - constructor를 사용할 수 없다. 따라서 생성자 함수로 사용할 수 없다.
+  - arguments가 존재하지 않는다.
+  - 함수 자체의 바인딩을 갖지 않는다. 따라서 this를 참조하면 상위 스코프의 this를 그대로 따른다.
+
+- 즉시 실행 함수(IIFE)
+  - 함수를 정의하고 그 순간 즉시 실행되는 함수
+  - 단 한 번만 호출되고 다시 호출할 수 없다. -> 이름을 붙이지 않는다.
+
+- 고차 함수
+  - 함수를 인수로 받거나 결과로 새로운 함수를 반환하는 역할을 하는 함수
+
+### 함수를 만들 때 주의해야 할 사항
+
+1. 함수의 부수효과를 최대한 억제한다.(순수함수)
+
+   - 부수 효과가 없고, 동일한 인수를 받으면 동일한 결과를 반환해야 한다.
+   - 작동 중 외부에 어떠한 영향도 미쳐서는 안된다.
+   - 리액트 : 부수 효과를 처리하는 훅인 ```useEffect```의 작동을 최소화하여 컴포넌트 안정성을 높인다.
+
+2. 가능한 한 함수를 작게 만든다.
+
+3. 누구나 이해할 수 있는 이름을 붙인다.
+
+---
+
+<br/>