[ 모던 리액트 : Deep Dive ] - 리액트 개발에서 반드시 알아야하는 JS

📍 들어가기

이번에는 리액트 Deep Dive의 첫번째 장을 톺아보며 부족한 부분을 메꿔보려고 한다.

간단한 요약보다는 중요하거나 미처 간과했던 부분들을 짚어보고자 한다. 

---

✅  자바스크립트의 또 다른 비교, Object.is

1.  ==  👉 같음을 비교하기 전에 양쪽이 같은 타입이 아니라면, 비교할 수 있도록 강제로 형변환을 진행한다.
2. === 👉 강제 형 변환을 진행하지 않으며, Object.is와 달리 개발자가 기대하는 방향으로 비교되지 않을 수 있다. 

5 == '5' 			// true
Object.is(5, '5'); 	// false

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

 

❗️다만, 주의해야 할 점은 객체 비교에서는 차이가 없다는 것이다.

Object.is는 동등비교 ( === )가 가지는 한계를 극복하기 위해 만들어진 것이며, 객체 간 비교에 있어서는 JS의 특징 때문에 여전히 한계가 있다. 

 

📍리액트에서의 동등 비교 과정

function is(x: any, y: any) {
  return (
    (x === y && (x !== 0 || 1 / x === 1 / y)) || (x !== x && y !== y) 
  );
}

// Object.is가 존재하지 않는다면, 위 함수 사용
const objectIs: (x: any, y: any) => boolean =
  typeof Object.is === 'function' ? Object.is : is;

export default objectIs;

 

기본적으로 리액트에서는 위의 is 함수를 기반으로 shallowEqual을 비교하고 있다.

아래처럼 말이다. 

function shallowEqual(objA: mixed, objB: mixed): boolean {
	// Object.is로 먼저 비교를 수행
  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;
  }

  // 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;
}

export default shallowEqual;

 

하지만, 여기에도 단점은 있다.

바로 얕은 비교만 가능하다는 것이다.  때문에 우리는 useMemo를 사용할 때 이 부분을 인지하고 있어야 한다.

 

---

 

✅ 함수

자바스크립트에서 함수는 일급 객체이다.

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하며, 이는 함수가 다른 함수의 매개변수가 되거나 반환값, 할당이 가능하다는 것을 의미한다.

 

그래서 우리는 고차 함수를 생성할 수 있는 것이다.

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

add(1)(3) // 4

 

리액트에서는 고차 함수와 유사하게 고차 컴포넌트를 만들어 컴포넌트 내부에서 공통으로 관리되는 로직을 분리해 관리할 수 있기도 하다.

해당 부분에 대해서는 3.2절에서 다루고자 한다.

 

그렇다면 리액트에서 어떤 방식으로 함수를 활용해야 할까?

 

1️⃣  함수의 부수 효과를 최대한 억제하라.

우리가 흔히 말하는 부수효과를 억제한 함수는 순수함수라고 떠올릴 수 있다.

물론 컴포넌트를 순수함수로 만들게 된다면, 예측 가능하고 안정적이게 컴포넌트를 만들 수 있다.

 

하지만, 모든 곳에서 그래야만 하는 것은 아니다.

사실, 컴포넌트 내부에서 해당 API를 호출하고 console.log( )를 실행시키기만 해도 부수효과를 가져오기에 실무에서 이는 더더욱 피하기 어렵다. 그래서 우리는 이를 억제하는 방향으로 가야 되는 것이다.

 

useEffect의 사용을 없앨 수는 없지만, 작동을 최소화하여 함수의 역할을 좁히는 것이 중요하다. 

 

2️⃣ 가능한 한 함수를 작게 만들어라.

함수당 코드의 길이가 길어질수록 문제를 일으킬 여지가 있는 코드가 발생한 확률이 높아지고

내부에서 어떤 일이 발생하는지 추적하기 어려워진다.

 

이 외에도 ❗️중첩이 얼마나 많고, 콜백은 얼마나 있는지❗️에 따른 문제도 발생할 수 있다.

최적의 함수 크기를 단언할 수는 없으나 가능한 한 함수의 크기를 작게 하는 것이 좋다.

 

 

3️⃣ 누구나 이해할 수 있는 이름을 붙여라.

어디에서 어떤 개발을 해도 이 부분은 중요하다고 생각한다.

컴포넌트 내에서 비즈니스 로직이 들어가는 순간, 이름이 모호하거나 해당 기능을 예측할 수 없다면 협업하기는 더욱 더 어려운 구조로 변해갈 것이다. 따라서 가능한 한 함수의 이름은 간결하고 이해하기 쉽게 붙이는 것이 좋다.

 

이것은 콜백함수에도 적용할 수 있다.

useEffect(function apiRequest(){

},[])

 

이를 통해 useEffect안에 코드를 살펴보지 않아도, 내부에서 어떤 기능을 수행하는지 미리 예측할 수 있다는 장점을 가지게 된다.

---

✅ 클래스 

현재는 함수형 컴포넌트를 주로 사용하고 있지만, 클래스형을 이해하게 된다면 리액트의 작동방식을 수월하게 받아들일 수 있을 것이다.

 

📍 Object.getPrototype( )

Object.getPrototype과 동일하게 작동하는 것은 바로 _ _ proto_ _ 이다.

하지만, _ _proto_ _는 가급적 사용하지 않는 것이 좋다. 왜냐하면, typeof null === 'object' 와 유사하게 원래 의도한 표준은 아니지만 과거 브라우저가 이를 사용했기에 유지되는 기능이기 때문이다.

 

여기서, 프로토타입 체이닝의 특성을 발견할 수 있다.

모든 객체는 프로토 타입을 가지고 있고, 특정 속성을 찾을때 자신으로부터 시작해서 최상위 객체인 Object까지 훑게 된다.

 

toString을 대부분의 객체에서 사용할 수 있는 것도 비슷한 논리이다.

 

클래스로 만든 함수를 babel이 어떻게 변환하는지 확인할 수 있는 사이트이다. 클릭해서 살펴보자.

 

---

✅ Typescript

이제는 없어서는 안될 개발언어로 자리잡은 타입스크립트를 어떻게 리액트에 효과적으로 작성해야 하는지 살펴보자.

 

 

1️⃣  any 대신 unknown을 사용하자.

any는 타입스크립트를 사용하는 의미를 없애는 타입이다.

왜냐하면, 런타임에 모든 타입을 받아들이기에 사실상 자바스크립트와는 다를게 없다.

 

그래서 불가피하게 타입을 단정할 수 없는 부분에 대해서는 unknown을 사용하는 것이 좋다.

어떤 값도 할당할 수 있으나, 타입 좁히기 이후에만 사용할 수 있다. 이는 top type으로 불리기도 한다.

const getTodoItem = (callback:unknown) => {
	if( typeof callback === 'function') callback();
    
    throw new Error('callback은 함수여야 합니다')
}

 

이를 잘 활용하기만 한다면, 예상치 못한 타입을 받음과 동시에 안전한 사용도 가능하게 된다.

 

앞서 말한 top type의 반대 개념은 bottom type 이다. 이는 never를 지칭한다.

type what1 = string & number
type what2 = ('happehee' | 'seohee') & 'front-end'

 

what1 에는 string과 number를 둘다 만족해야 하지만, 이는 존재하지 않기에 never로 타입이 지정된다.

what2도 마찬가지로, 양쪽의 타입에 교차점이 발생하지 않아 never가 선언된다.

 

2️⃣  타입 가드를 적극 활용하자

타입을 좁히는 데 도움을 주는 것이 바로 타입 가드이다. 

 

1. instanceof 👉 지정한 인스턴스가 특정 클래스의 인스턴스 인지 확인할 수 있는 연산자
2. typeof 👉 특정 요소에 대해 자료형을 확인하는 데 사용
3. in 👉 어떤 객체에 키가 존재하는지 확인하는데 사용

 

3️⃣ 제네릭

함수나 클래스 내부에서 단일 타입이 아닌 다양한 타입에 대응하도록 도와주는 도구이다.

단일 제네릭이 아닌 다중 제네릭을 사용하는 경우, T,G 보다는 의미있는 제네릭 표현을 적어주는 것이 좋다.

const multipleGeneric<First, Second>(a1 : First , a2: Second):[First, Second]{
	return [a1, a2]
 }
 
 const [a ,b] = multipleGeneric<string, number>('happhee', 12)

 

4️⃣ 인덱스 시그니처 

아직도 잘 활용하지 못하고 있는 특성중에 하나이기도 하다. 

  type Happhee = {
  	// 👇 요부분이 인덱스 시그니처 이다.
    [key: string]: string;
  };
  const happheeKid: Happhee = {
    hobby: 'dance',
    fruite: 'strawberry',
  };

  console.log(happheeKid['hobby']);		// dance
  console.log(happheeKid['fruite']);	// strawberry
  console.log(happheeKid['age']);		// undefined

 

위와 같이 인덱스 시그니처를 사용하면, 키에 타입을 부여할 수 있다는 장점이 있으며 이는 동적인 객체를 정의할 때 유용하다. 

 

❗️ 다만 키의 범위가 커지는 경우 ❗️

타입의 범위가 너무 커지므로 존재하지 않는 키로 접근하면 undefined로 반환된다. 

 

따라서 객체의 키를 동적으로 선언하는 경우를 최대한 지양하고, 객체의 타입도 필요에 따라 좁혀야 하는 과정이 필요하다.

 

  type Happhee = {
    [key: 'hobboy' | 'fruite' ]: string;
  };
  
  type Happhee = Record<'hobby'|'fruite', string>

 

방법은 두 가지 이다. 

• 타입을 사용한 인덱스 시그니처

다만 첫 번째의 방법에서는 아래와 같은 오류가 발생한다.

문자열 리터럴은 사용할 수 없다.

 

때문에 우리는 맵드 타입을 사용해서 해당 문제를 해결해야 한다.

 type Info = 'hobby' | 'fruite';
 
 type Happhee = {
    [key in Info ]: string;
  };
  
  type Happhee = Record<'hobby'|'fruite', string>

 

두 번째 방법은 

• record를 사용한 타입 좁히기

이렇게 타입을 좁혀도 Object.keys로 접근했을때 key의 타입이 string [ ] 로 추론되는 것을 확인할 수 있다. 

여전히 키의 타입이 string이다.

사실 그래서 한번 as로 타입을 단언해주어야 한다. 

const happheeKeyList = Object.keys(happheeKid);
  (happheeKeyList as Array<keyof Happhee>).map((key) => happheeKid[key]);

 

단언보다 가드로 안정적이게 사용하고 싶다면 아래와 같이 해당 가드 함수를 만들면 된다.

const guardKeyOf = <T extends Object>(obj: T): Array<keyof T> => {
    return Array.from(Object.keys(obj)) as Array<keyof T>;
 };

guardKeyOf(happheeKid).map((key) => happheeKid[key]);

 

가드 함수가 작동하는 방식은 다음 순서와 같다.

 

1. 매개변수의 타입은 T이다.
2. 반환 값은 매개변수의 키 타입이다.

정상적으로 타입 추론이 되는 것을 확인할 수 있다.

 

그렇다면 왜 Object.keys가 string[]으로 만들어진걸까?

👉 타입스크립트의 구조적 타이핑 특징때문에 덕 타이핑이 이루어지기 때문이다. 즉, 타입 체크시 그 값이 가진 형태에만 집중한다는 것.

👉 포괄적인 대응을 위해 string[]으로 제공되는 것이다.

---

🌈 정리하기

이번 시간에는 리액트에서 비교과정, 함수 작성 방법, 타입 가드를 사용하는 방법을 살펴보았다. 

실무에서 적용하지 못한 내용들과 record와 같은 타입을 사용하는 방법을 능숙하게 다루면 좋을 것 같다는 생각을 하게 되는 시간이었다.

 

---

📚 참고자료

• 리액트 공식문서
• 모던 리액트 : Deep Dive