context api, redux, mobx, swr

정하일·2022년 6월 29일
  • React에서는 전역상태를 관리하는 라이브러리들이 상당히 존재한다.
  • Redux(리덕스)라는 라이브러리가 존재한다.

Context API

  • context API 는 구성요소 트리에서 쉽게 전달할 수 있는 전역 데이터를 생성합니다 . 이것은 데이터를 전달하기 위해 props 가 있는 구성 요소 트리를 통과해야 하는 "props Drilling"의 대한으로 사용되고 있습니다.
  • 장점으로는 타사 라이브러리가 필요하지 않다. 사용의 간편함이 있다.
  • 단점은 속도가 느리다. 컨텍스트의 값이 변경되면 실제로 사용하는지 여부에 관계없이 컨텍스트를 사용하는 모든 구성요소가 랜더링 된다.

Redux

  • Redux는 React 앱의 상태를 저장하고 관리하는 데 사용하는 상태관리 라이브러리이다.
  • 세가지 원칙
    1 . 전체 상태 값이 하나의 자바스크립트 객체로 표현된다.
    2 . 상태 값은 읽기 전용의 불변 객체로 관리한다.
    3 . 오직 순수함수 의해서만 상태값을 변경할 수 있다.
  • 장점으로는 업데이트가 되면 해당 상태를 사용하는 구성 요소만 다시 랜더링 되고 디버깅 도구가 존재한다.
  • 단점으로는 번들 크기가 증가한다.

Mobx

  • 상태관리를 간단하게 하기 위해 만들어진 기능적 반응 프로그래밍을 적용하는 상태관리 라이브러리
  • 장점으로는 Redux에 비해 상용구가 적다.
  • 단점으로는 업데이트 중에 Mobx 상태를 덮어쓴다. 테스트 유지 및 관리가 어려울 수 있다.

SWR

  • SWR은 Next.Js 에서 개발한 라이브러리 이다.
  • 장점 데이터가 캐싱된다. 자동으로 재검증을 해준다.

0개의 댓글