원시타입

원시타입은 JavaScript에서 값 자체가 변수에 직접 저장되는 가장 기본적인 데이터 타입입니다. 객체나 배열과 달리 메모리 주소가 아닌 실제 값이 저장되어, 변수 간 할당 시 값이 복사됩니다.

7가지 원시타입

JavaScript는 다음 7가지 원시타입을 제공합니다:

• number: 정수와 실수 (42, 3.14, Infinity)
• string: 문자열 ("hello", 'world', template)
• boolean: 논리값 (true, false)
• null: 의도적인 빈 값
• undefined: 값이 할당되지 않은 상태

특수 원시타입

• symbol: 유일한 식별자 생성 (ES6+)
• bigint: 큰 정수 처리 (ES2020+)

Symbol 타입 이해하기

Symbol은 변경 불가능(immutable)하고 유일함을 보장하는 원시타입입니다. 주로 객체 프로퍼티의 충돌 없는 키를 만들 때 사용합니다.

const user = {};
const id1 = Symbol('id'); // 인자의 문자열은 단지 description의 역할밖에 하지 않는다.
const id2 = Symbol('id');

user[id1] = 'user1';
user[id2] = 'user2';

console.log(user[id1]); // 'user1'
console.log(user[id2]); // 'user2'
console.log(id1 === id2); // false (같은 설명이어도 다른 값)

• 같은 문자열로 생성해도 항상 다른 값
• 열거되지 않는다.
• 문자열 인자는 디버깅 용도일 뿐, 값에 영향이 없다.

Symbol 함수의 정적 프로퍼티 중 Well-Known Symbol이라 불리는 특별한 심볼들이 있습니다. 이 Well-Known Symbol은 자바스크립트 엔진에 상수로 존재해 이 값을 참조해 일정한 처리를 진행합니다.

일정한 처리라 함은 어떠한 객체가 Symbol.iterator를 프로퍼티 key로 하는 메소드를 가지고 있다면 자바스크립트 엔진은 이 객체가 이터레이션 프로토콜을 따른다고 생각하고 이터레이터하게 동작하게 합니다.

저희가 사용하는 빌트인 객체 Array, String 등 순회 가능한 객체는 모두 내부에 Symbol.iterator를 가지고 있기에 이터레이션 프로토콜을 따라 반복문, 스프레드 연산자의 사용이 가능합니다.

// Symbol.iterator를 키로 사용한 메소드
const iterableObj = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    return {
      next() { // 일반 함수 사용
        if (index < data.length) {
          return { value: data[index++], done: false };
        }
        return { done: true };
      }
    };
  }
};

for (const value of iterableObj) {
  console.log(value); // 1, 2, 3
}

bigint

bigint는 임의의 정밀도로 정수를 나타낼 수 있는 원시 타입입니다. Number 타입의 안전한 정수 범위(2^53 - 1)를 넘어서는 큰 정수를 다룰 때 사용됩니다.

// Number의 한계
console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2); // true (정밀도 손실)

// BigInt 사용
const bigNum1 = BigInt(Number.MAX_SAFE_INTEGER) + 1n;
const bigNum2 = BigInt(Number.MAX_SAFE_INTEGER) + 2n;

console.log(bigNum1 === bigNum2); // false (정확한 계산)
console.log(typeof bigNum1); // "bigint"

원시타입과 참조타입의 차이

참조 타입은 위에서 설명한 타입 외에 모든 객체, 배열 등이 참조 타입으로 분류됩니다. JavaScript의 데이터 타입을 이해하려면 원시타입과 참조타입의 근본적인 차이를 알아야 합니다. 이 차이는 변수 할당, 함수 인자 전달, 비교 연산에서 완전히 다른 동작을 보입니다.

값 저장 방식의 차이

원시타입: 변수에 실제 값이 직접 저장됩니다.

let a = 10;
let b = a;    // 값 10이 복사되어 저장
a = 20;       // a만 변경됨
console.log(a); // 20
console.log(b); // 10 (영향받지 않음)

참조타입: 변수에 **메모리 주소(참조)**가 저장됩니다.

let obj1 = { value: 10 };
let obj2 = obj1;  // 메모리 주소가 복사되어 같은 객체를 참조
obj1.value = 20;  // 같은 객체를 수정
console.log(obj1.value); // 20
console.log(obj2.value); // 20 (같은 객체이므로 함께 변경)

비교 연산의 차이

원시타입: 값 자체를 비교합니다.

let a = 5;
let b = 5;
console.log(a === b); // true (같은 값)

let str1 = "hello";
let str2 = "hello";
console.log(str1 === str2); // true (같은 값)

참조타입: 메모리 주소를 비교합니다.

let obj1 = { value: 5 };
let obj2 = { value: 5 };
console.log(obj1 === obj2); // false (다른 메모리 주소)

let obj3 = obj1;
console.log(obj1 === obj3); // true (같은 메모리 주소)

함수 인자 전달의 차이

원시타입: Call by Value (값에 의한 전달)

function changeValue(x) {
  x = 100;  // 복사된 값만 변경
}

let num = 50;
changeValue(num);
console.log(num); // 50 (원본 변수는 변경되지 않음)

참조타입: Call by Reference (참조에 의한 전달)

function changeObject(obj) {
  obj.value = 100;  // 같은 객체를 수정
}

let myObj = { value: 50 };
changeObject(myObj);
console.log(myObj.value); // 100 (원본 객체가 변경됨)

💡 이러한 차이점은 React 사용 시 알아야 하는 불변성 개념과 직결됩니다. 특히 참조타입을 다룰 때 의도치 않게 원본 객체나 배열을 변경하여 예상과 다른 동작을 일으킬 수 있으므로, 두 타입의 차이점을 명확히 이해하고 코드를 작성하는 것이 중요합니다.

자바스크립트에서의 비교

자바스크립트에서 값을 비교하는 연산자는 두 가지입니다.

• 동등연산자(==): 값만 비교하고 타입은 무시합니다.
• 일치연산자(===): 값과 타입을 모두 비교합니다.

대부분의 경우 일치연산자로 충분하지만, 다음과 같은 특수한 경우에는 예상과 다른 결과가 나올 수 있습니다.

// 일치 연산자의 경우
NaN === NaN  // false
+0 === -0    // true

정확한 비교가 필요하다면 Object.is() 메서드를 사용 해야합니다.

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

Object.is()는 일치연산자와 거의 동일하지만, NaN과 ±0을 올바르게 구분합니다.

얕은 비교 (shallowEqual)

얕은 비교(Shallow Comparison) 는 다음과 같이 동작한다고 알려져 있습니다.

원시 타입: 값 자체를 비교 참조 타입: 참조(메모리 주소)만 비교

하지만 React와 Zustand에서의 얕은 비교는 다르게 동작합니다.

Zustand의 얕은 비교 코드:

// src/react/shallow.ts
export function shallow<T>(valueA: T, valueB: T): boolean {

  if (Object.is(valueA, valueB)) { // 값을 비교
    return true
  }
  if (
    typeof valueA !== 'object' ||
    valueA === null ||
    typeof valueB !== 'object' ||
    valueB === null // null 체크 및 타입 검사
  ) {
    return false
  }
  if (Object.getPrototypeOf(valueA) !== Object.getPrototypeOf(valueB)) { // prototype을 검사 Array.prototype, Object.prototype ....etc
    return false
  }
  if (isIterable(valueA) && isIterable(valueB)) { // isIterable은 해당 value에 Symbol.iterator 가 존재하는지 확인한다.
    if (hasIterableEntries(valueA) && hasIterableEntries(valueB)) { // hasIterableEntries은 entries 메서드가 존재하는지 확인한다. Map, Set의 경우
      return compareEntries(valueA, valueB) // 이미 entries 메서드가 존재하면 실행
    }
    return compareIterables(valueA, valueB) // entries가 존재하지 않으면 실행
  }
  // assume plain objects 일반 객체 처리
  return compareEntries(
    { entries: () => Object.entries(valueA) },
    { entries: () => Object.entries(valueB) },
  )
}

Zustand의 얕은 비교는 객체와 배열의 최상위 레벨 값까지 비교합니다. compareEntries와 compareIterables 함수가 객체를 순회하며 값을 비교합니다.

// src/react/shallow.ts
const compareEntries = (
  valueA: { entries(): Iterable<[unknown, unknown]> },
  valueB: { entries(): Iterable<[unknown, unknown]> },
) => {
  const mapA = valueA instanceof Map ? valueA : new Map(valueA.entries())
  const mapB = valueB instanceof Map ? valueB : new Map(valueB.entries())
  if (mapA.size !== mapB.size) {
    return false
  }
  for (const [key, value] of mapA) {
    if (!Object.is(value, mapB.get(key))) {
      return false
    }
  }
  return true
}

const compareIterables = (
  valueA: Iterable<unknown>,
  valueB: Iterable<unknown>,
) => {
  const iteratorA = valueA[Symbol.iterator]()
  const iteratorB = valueB[Symbol.iterator]()
  let nextA = iteratorA.next()
  let nextB = iteratorB.next()
  while (!nextA.done && !nextB.done) {
    if (!Object.is(nextA.value, nextB.value)) {
      return false
    }
    nextA = iteratorA.next()
    nextB = iteratorB.next()
  }
  return !!nextA.done && !!nextB.done
}

compareEntries 함수는 어댑터 패턴을 통해 Map, Set, 일반객체를 순회하며 값을 비교합니다. compareIterables 함수는 entries 메서드가 없는 Array, String 등의 데이터를 순회하며 비교합니다.

React의 shallowEqual도 유사한 방식으로 동작합니다:

// react/packages/shared/shallowEqual.js

function shallowEqual(objA: mixed, objB: mixed): boolean {
  if (is(objA, objB)) { // is 함수는 단지 Object.is() 함수를 분리해놓은 함수입니다.
    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;
  }

  // Test for A's keys different from B.
  for (let i = 0; i < keysA.length; i++) {
    const currentKey = keysA[i];
    if (
      !hasOwnProperty.call(objB, currentKey) ||
      // $FlowFixMe[incompatible-use] lost refinement of `objB`
      !is(objA[currentKey], objB[currentKey])
    ) {
      return false;
    }
  }

  return true;
}

실제로 얕은 비교 코드를 구현할 때는 일반적으로 알려진 얕은 비교(메모리 주소만 참조)와 달리, 객체의 최상위 레벨 속성까지 비교하는 방식을 사용해야 합니다.

깊은 비교

깊은 비교는 객체나 배열의 중첩된 모든 속성을 재귀적으로 비교하는 방식입니다. React나 Zustand 같은 라이브러리에서는 성능상의 이유로 일반적으로 사용하지 않으며, 객체 크기에 따라 비용이 기하급수적으로 증가합니다.

export const deepEquals = (a: unknown, b: unknown) => {
  // 1. 값이 같으면 바로 true 반환 참조 타입의 경우 주소 비교
  if (Object.is(a, b)) {
    return true;
  }

  // 2. 원시 값 처리
  if (typeof a !== "object" || typeof b !== "object" || a === null || b === null) {
    return Object.is(a, b);
  }

  // 3. 배열 깊은비교 재귀
  if (Array.isArray(a) && Array.isArray(b)) {
    if (a.length !== b.length) {
      return false;
    }

    for (let i = 0; i < a.length; i++) {
      if (!deepEquals(a[i], b[i])) return false;
    }

    return true;
  }

  // 4. 객체 깊은비교 재귀
  const keysA = Object.keys(a);
  const keysB = Object.keys(b);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (const key of keysA) {
    if (!deepEquals(a[key as keyof typeof a], b[key as keyof typeof b])) return false;
  }

  return true;
};

얕은 비교와 달리 배열이나 객체의 중첩된 구조를 만날 때마다 즉시 재귀 호출을 통해 더 깊은 레벨(DFS)로 들어가 끝까지 파고들어 비교를 완료합니다.

JSON.stringify() 방식

간혹 JSON.stringify()를 통한 비교를 사용하는 경우가 있지만, 여러 문제점이 존재합니다:

1. 속성 순서 의존성

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 2, a: 1 };

JSON.stringify(obj1); // '{"a":1,"b":2}'
JSON.stringify(obj2); // '{"b":2,"a":1}'

// 같은 내용이지만 false!
deepEqualsJSON(obj1, obj2); // false

2. 성능 문제

const largeObj = { /* 매우 큰 객체 */ };

// JSON.stringify는 전체 객체를 문자열로 변환
// 메모리 사용량이 2배가 됨 (원본 + 문자열)
// 불필요한 문자열 생성 비용 및 문자열 비교의 비용은 작지 않다.

이외에도 NaN, Infinity 같은 특수 값 처리 불가, 데이터 손실 가능성, 함수나 undefined 값 무시 같은 문제가 있습니다. 다음과 같은 제한적인 상황에서는 고려해볼 수 있습니다:

// 1. 간단한 plain object만 비교
const config1 = { timeout: 5000, retries: 3 };
const config2 = { timeout: 5000, retries: 3 };

// 2. 속성 순서가 보장되는 경우 (같은 소스에서 생성)
const response1 = JSON.parse(apiResponse);
const response2 = JSON.parse(apiResponse);

// 3. 프로토타이핑이나 간단한 테스트

React에서의 실용적 활용

React와 연계해서 사용하기에는 memo의 두 번째 인자에 직접 비교 함수를 제공하는 방식이 더 적합합니다:

const MemoizedComponent = memo(SomeComponent, arePropsEqual);
// arePropsEqual은 콜백 함수로 prevProps와 currentProps를 받습니다

추가 팁

💡 React의 불변성을 지키기 위해 깊은 복사가 필요하다면 lodash-es의 cloneDeep 함수를 이용하면 간편하게 깊은 복사를 통해 새로운 객체를 얻을 수 있습니다.

Q1. useRef에 왜 함수를 넣어줘야 하나요?

이 useRef 구현에서 useState에 함수를 전달하는 이유는 불필요한 객체 생성을 방지하기 위해서입니다.

const [ref] = useState({ current: initialValue }); // 매번 새 객체 생성

위처럼 작성하면 컴포넌트가 리렌더링될 때마다 { current: initialValue } 객체가 새로 생성됩니다. useState는 초기값을 한 번만 사용하지만, 객체 생성 자체는 매번 발생합니다.

이를 해결하는 방법이 지연 초기화(lazy initialization)입니다.

const [ref] = useState(() => ({ current: initialValue })); // 최초 한 번만 실행

함수를 전달하면 useState가 최초 렌더링 시에만 함수를 실행하여 객체를 생성합니다. 이후 리렌더링에서는 함수가 실행되지 않아 불필요한 객체 생성을 방지합니다.

React의 실제 구현에서 이를 확인할 수 있습니다:

// react/packages/react-reconciler/src/ReactFiberHooks.js

// 최초 렌더링 시 실행
function mountStateImpl<S>(initialState: (() => S) | S): Hook {
  const hook = mountWorkInProgressHook();
  
  if (typeof initialState === 'function') {
    const initialStateInitializer = initialState;
    initialState = initialStateInitializer(); // 함수 실행
  }
  // ... 생략
}

// 업데이트 시 실행
function updateReducerImpl<S, A>(
  hook: Hook,
  current: Hook,
  reducer: (S, A) => S,
): [S, Dispatch<A>] {
  const queue = hook.queue;
  // 초기값 재실행 없이 큐에서 상태 처리
  queue.lastRenderedReducer = reducer;
}

// mountWorkInProgressHook, updateWorkInProgressHook부터 살펴봐야 하지만 너무 길어져 넘기겠습니다.😅

• 마운트 시: mountStateImpl에서 typeof initialState === 'function' 검사 후 함수 실행
• 업데이트 시: updateReducerImpl에서 배치 업데이트를 위해 fiber의 큐에 변경사항만 저장, 초기값 함수는 재실행하지 않음

이는 React에서 인라인 스타일을 권장하지 않는 이유와 동일합니다. 렌더링 과정에서 객체 리터럴은 항상 새로운 참조를 생성하기 때문입니다. 이번과제 ToastContext 구축 시 value 부분에도 적용되는 개념입니다.👀

참고문서

• React Github Code

Q2. useMemo에 return에 왜 에러가 뜨는지 모르겠어요

문제 코드

export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T {
  const valueRef = useRef<T | undefined>(undefined);
  const depsRef = useRef<DependencyList>([]);

  if (!_equals(depsRef.current, _deps)) {
    valueRef.current = factory();
    depsRef.current = _deps;
  }

  return valueRef.current; // error : 'T | undefined' 형식은 'T' 형식에 할당할 수 없습니다.

TypeScript 에러입니다. useMemo 훅의 반환 타입은 T로 정의했지만, valueRef.current는 undefined일 가능성이 있어 타입 불일치가 발생합니다.

해결 방법: 초기 상태 처리 추가

export function useMemo<T>(factory: () => T, _deps: DependencyList, _equals = shallowEquals): T {
  const valueRef = useRef<T | undefined>(undefined);
  const depsRef = useRef<DependencyList>([]);

 // 초기 렌더링이거나 의존성이 변경된 경우
  if (valueRef.current === undefined || !_equals(depsRef.current, _deps)) {
    valueRef.current = factory();
    depsRef.current = _deps;
  }

  return valueRef.current; // 이제 T 타입으로 추론됨

valueRef.current === undefined 조건을 추가하여 초기 렌더링 시 undefined 상태를 처리합니다. 이제 반환 시점에는 항상 T 타입이 보장됩니다.