나홀로 리액트 스터디 0.1

부제 : 🎄 연말에는 역시 공부

최근까지 회사에서 Vue를 사용했으나, 팀 개편 이후 다시 리액트를 사용해야하는 상황이 되었다.
사이드 프로젝트를 해오긴 했지만 새 팀에서 주어진 업무에는 단순히 리액트로 코드를 작성하는 것에 그치는 것이 아닌,
리액트 컴포넌트 및 로직 설계까지 요구되었기 때문에 바쁘다는 핑계로 미뤄두었던 리액트 공부가 다시 필요할 것 같다는 생각이 들었다.

구글링이나 공식 문서 등으로 필요한 공부를 하다가 소비 중독 인간 답게 충동적으로 React Deep Dive라는 책을 구매했다.
이왕에 산 거 잘 활용해보고 싶어서 매일 읽으면서 알게 되는 내용들을 간단히 정리해보려고 한다.

🍐 Object.is

ES6에서 제공하는 기능으로, 리액트에서는 이 기능을 이용해서 동등 비교를 한다
==나 ===가 제대로 비교하지 못하는 부분을 보완한 비교 매서드인데, 객체 비교에 있어서는 둘과 별 차이가 없다
그러므로 Object.is 도 객체를 비교할 때 얕은 비교를 수행한다
그렇다는 건 리액트에서 리렌더링을 결정하기 위해 동등 비교를 할 때 이런 점을 제대로 고려하지 못하면 원하는 대로 동작하지 않을 수 있음을 의미한다 (ex: React.memo를 사용했으나 props가 중첩 객체 형태일 때... etc)

//react에서 동등 비교에 사용하는 shallowEqual 함수 소스 코드 
import is from './objectIs';
//is 함수는 Obejct.is를 사용할 수 없는 인터넷 익스플로러 등을 고려해 폴리필을 넣어준 함수 (Object.is 사용할 수 없는 경우에 직접 Object.is와 유사하게 구현해둔 is 함수를 사용한다)
import hasOwnProperty from './hasOwnProperty';

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);

  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가 아닌 형태로 호출하기

아주 작은 단위의 컴포넌트부터 다시 작성하게 될 예정이라 컴포넌트 설계에 대한 고민이 많았는데
특정 컴포넌트가 isHeading이라는 props를 받아 h1 태그를 사용할지, span 태그를 사용할지 결정할 때에
JSX가 반환하는 값은 결국 React.createElement가 된다는 것을 알고 있으면
컴포넌트 전체를 isHeading을 조건으로 한 삼항연산자로 작성하지 않고
createElement를 이용해 조건 부여가 필요한 tag 부분만 처리가 가능하다

//createElement를 이용해서 삼항연산자로 전체 컴포넌트를 처리할 필요 없이 필요한 tag 부분만 처리 가능 
import {createElement} from 'react'

function TextOrHeading ({
	isHeading,
    children,
    }:PropsWithChildrenn<{isHeading: boolean}>){
    return createElement(
    isHeading ? 'h1' : 'span',
    {className: 'text'},
    children,
    )
    }

🍐 HOF와 HOC

자바스크립트에서 함수는 일급 객체(*다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체)로
매개변수가 되거나, 변수에 할당되거나, 반환값이 될 수도 있다.

Higher Order Function = 고차 함수
는 함수를 인수로 받거나, 새로운 함수를 반환하는 역할을 하는 함수를 말하며

Higher Order Component = 고차 컴포넌트
는 함수형 컴포넌트가 고차 함수와 유사하게 함수형 컴포넌트를 인수로 받아 새로운 함수형 컴포넌트를 반환하는 것을 말한다

이런 고차 컴포넌트를 이용하면 컴포넌트 내에서 공통적으로 관리되는 로직을 분리해 관리할 수 있어 효율적인 리팩토링이 가능함

고차 컴포넌트의 대표적인 예시로 React.memo가 있음