📆 날짜

2023/12/07(목)

📚 챕터

리액트에서의 동등 비교

---

👨🏻‍💻 학습 내용

🎯 리액트에서의 비교

Object.is로 먼저 비교를 수행 ->
객체 간 얕은 비교를 한 번 더 수행

• 객체 간 얕은 비교

  • 첫 번째 깊이에 존재하는 값만 비교

  Object.is는 ES6에서 제공하는 기능이기 때문에 리액트에서는 이를 구현한 폴리필(Polyfill)을 함께 사용한다.

• 폴리필(polyfill)

  • 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드

    예제 코드를 통해 살펴보자.

    <script>
    //ObjectIs 함수를 사용한 shallowEqual라는 함수 생성
    //아래 링크 참고
   
    //Object.is는 참조가 다른 객체에 대해 비교가 불가능
    Object.is({ hello: 'world'}, { hello: 'world' }) // false 
    
  // shallowEqual함수는 객체의 1 depth까지는 비교가 가능
    shallowEqual({ hello: 'world'}, { hello: 'world' }) // true
   // 2 depth까지 가면 이를 비교할 방법이 없으므로 false를 반환
    shallowEqual({hello: {hi: 'world'}},{hello: {hi: 'world'}})//false
    
    </script>

👍🏻 참고

objectIs

shallowEqual

그렇다면 왜? 어디서 어떻게 Object.is를 사용할까?

• props가 깊어지는 경우

• 객체 안에 또 다른 객체가 있을 경우

🎯 정리

자바스크립트를 기반으로 한 리액트의 함수형 프로그래밍 모델에서도 한계를 뛰어넘을 수 없으므로 얕은 비교만을 사용해 비교를 수행해 필요한 기능을 구현하고있다.

자바스크립트의 특징을 잘 숙지한다면 향 후

함수형 컴포넌트에서 사용되는 훅의 의존성 배열의 비교

렌더링 방지를 넘어선 useMemo와 useCallback의 필요성

렌더링 최적화를 위해서 꼭 필요한 React.memo를 올바르게 작동시키기 위해

고려해야 할 것들을 쉽게 이해할 수 있다고 한다.

개인적인 생각을 감히 이야기하자면 이 챕터의 내용 전체를 이해 하려면
JS, React에 대해 어느정도 숙지한 상태인 사람이여야 
내용 전체흐름을 파악하기 수월할 것 같다.
이번 챕터의 학습내용은 완벽하게 이해하지 못했지만 
나름대로 이해한 내용을 나만의 방식으로 
풀어서 작성했다.

➡️ 다음은 함수에 대해 알아보자.