1장 리액트 개발을 위해 꼭 알아야 할 스크립트 (1)

1.1 자바스크립트의 동등 비교

1.1.1 자바스크립트의 데이터 타입

원시 타입

• undefined

  • 선언한 수 값을 할당하지 않은 변수 또는 값이 주어지지 않은 인수에 자동으로 할당되는 값

• null

  • 아직 값이 없거나 비어 있는 값을 표현할 때 사용한다. 명시적으로 비어있는 값

  • typeof null === 'object'

• boolean

  • true | false 만을 가질 수 있는 데이터 타입이다.

• number

  • -(2^53-1) 과 2^53-1 사이의 값을 저장할 수 있다.

• bignit

  • 2^53-1 을 저장할 수 있는 number의 한계를 넘어서 더 큰 숫자를 저장할 수 있게 해준다.

하지만 타입스크립트에서 선언할 경우 숫자 뒤에 n을 붙이는건 에러가 난다.

그렇다고 이것에 대한 검색결과가 많이 나오는 것도 아니니 우리는 아래형식으로 써주자!

BigInt('1910395912351328590') 

• string

  • 텍스트 타입의 데이터를 저장하기 위해 사용된다.

  • 백틱으로 사용시 줄바꿈이 가능하며 문자열 내부에 표현식을 쓸 수 있다.

• symbol

  • ES6 에서 새롭게 추가된 타입.

  • 중복되지 않는 고유값을 나타내기 위해 만들어졌다.

객체 타입

• Object

  • 배열, 함수, 정규식, 클래스 등이 객체 타입에 포함된다.

1.1.2 값을 저장하는 방식의 차이

• 원시 타입과 객체 타입의 차이점 = 값을 저장하는 방식.

• 원시 타입은 불변 형태의 값으로 변수 할당 시점에 메모리 영역을 차지하고 저장된다.

• 객체 타입은 프로퍼티를 삭제, 추가, 수정할 수 있으므로 원시 값과 다르게 변경 가능한 형태로 저장되고 복사 또한 값이 아닌 참조를 전달한다.

• 객체 간의 비교는 우리가 이해하는 내부의 값이 같다 하더라도 결과는 대부분 true가 아닐 수 있다

1.1.3 자바스크립트의 또 다른 비교 공식, Object,is

Object.is 는 두개의 인수를 받으며, 인수 두개가 동일한지 확인하고 반환하는 메서드다.

'==' 는 강제 형변환을 해서 비교하지만 Object.is 는 그대로 false를 반환한다.

'===' 와의 비교는 아래의 코드와 같다.

-0 === +0 // true
Object.is(-0, +0) // false

Number.NaN === NaN // false
Object.is(Number.NaN, NaN) //true

NaN === 0 / 0 // false
Object.is(NaN, 0 / 0) //true

1.1.4 리액트에서의 동등 비교

Object.js 는 ES6에서 지원하기 때문에 리액트에서는 값을 비교할 때 shallowEqual 이라는 함수를 구현해 사용하고 있다.

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);
    // 배열의 길이가 다르다면 false
    if (keysA.length !== keysB.length) {
      return false;
    }
    // A의 키를 기준으로, B에 같은 키가 있는지, 그리고 그 값이 같은지 확인한다.
    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;
  }

요약하면 Object.is 로 먼저 비교를 수행한 뒤 객체간 얕은 비교를 한번 더 수행하는 것이다.

얕은 비교까지만 구현한 이유는 리액트에서 사용하는 JSX props는 객체이고, props만 일차적으로 비교하면 되기 때문이다.

1.2. 함수

1.2.1 함수란 무엇인가?

함수란 작업을 수행하거나 값을 계산하는 등의 과정을 표현하고, 이를 하나의 블록으로 감싸서 실행 단위로 만들어 놓은 것을 의미한다.

1.2.2 함수를 정의하는 4가지 방법

함수 선언식

• 표현식이 아닌 일반 문으로 분류된다.

• 자바스크립트 엔진이 코드의 문맥에 따라 함수를 문이 아닌 표현식으로 해석하는 경우가 있기 때문에 아래와 같이 쓰고 변수에 할당해줄 수 도 있다.

function add(a, b) {
  return a + b
}

함수 표현식

• 일급 객체란 다른 객체들에게 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 말하는데 자바스크립트에서 함수는 일급 객체 이다.

• 함수의 이름을 생략하는 것이 일반적이다.
  (코드를 봤을 때 혼란을 방지하기 위함. 호출을 해도 어차피 에러가 난다.)

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

sum(10, 24) // 34

add(10, 24) //  Uncaught ReferenceError: add is not defined

함수 선언식과 표현식의 차이는 호이스팅(hoisting) 부분에서 볼 수 있다.
함수의 호이스팅은 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업을 의미한다.
이러한 함수의 호이스팅은 함수에 대한 선언을 실행 전에 미리 메모리에 등록하는 작업을 의미한다.
함수의 선언식은 코드의 순서에 상관없이 정상적으로 함수를 호출이 가능하다.
함수 표현식은 var 이 호이스팅시 선언과 동시에 undefined로 초기화 되기 때문에 에러가 발생하는 것이다.

console.log(typeof hello === 'undefined') // true
hello() // Uncaught TypeError: hello is not a function
var hello = function () {
  console.log('hello')
}
hello()

var : 선언과 동시에 초기화 됨.
let, const : 선언만 되고 초기화는 되지 않음

Function 생성자

• 거의 사용되지 않는다.

• 매개변수, 함수의 몸통을 모두 문자열로 작성해야 한다. (최악)

const add = new Function('a', 'b', 'return a + b')  

add(10, 24) // 34

화살표 함수

const add = (a, b) => {
 return a + b
}

const add = (a, b) => a + b

• constructor를 사용할 수 없다.

  • 생성자 함수로 화살표 함수 사용 불가

• arguments가 존재하지 않는다.

  • 함수에 인자를 받을 때 배열의 형태로 저장되어있는 객체.

• this 바인딩 : 따로 정리 할 것

  • 일반 함수에서의 this는 undefined 전역을 나타낸다.

  • 화살표 함수에서의 this는 바로 바깥 함수나 클래스의 this를 가리킨다.

this 를 사용할 수밖에 없는 클래스 컴포넌트 내부에서 각별히 주의하도록 하자!

1.2.3 다양한 함수 살펴보기

즉시 실행 함수

한 번 선언하고 호출된 이후부터는 더 이상 재호출이 불가능하기 때문에 이름을 붙이지 않는다.

(function (a, b) {
  return a + b
})(10, 24); // 34

((a, b) => {
  return a + b
},
)(10, 24) // 34

고차 함수

// 함수를 매개변수로 받는 대표적인 고차 함수, Array.prototype.map

const doubledArray = [1, 2, 3].map((item) => item * 2)

doubledArray // [2, 4, 6]

// 함수를 반환하는 고차 함수의 예
const add = function (a) {
  // a가 존재하는 클로저를 생성
  return function (b) {
   // b를 인수로 받아 두 합을 반환하는 또 다른 함수를 생성
   return a + b
  }
}

add(1)(3) // 4

1.2.4 함수를 만들 때 주의해야할 사항

• 함수의 부수 효과를 최대한 억제하라

  • 함수 의 부수 효과(side-effect)란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미한다.

  • 최대한 억제하라는 의미이지 외부에 영향을 주는 함수는 절대 만들지 말라는 것이 아니다.

• 가능한 한 함수를 작게 만들어라

  • 함수는 하나의 일을, 그 하나만 잘하면 된다. - by Malcolm Douglas Mcilroy

• 누구나 이해할 수 있는 이름을 붙여라