Redux를 사용하는 이유 3가지 (vs Context API)

2023. 1. 16.·🎨 프론트엔드 공부/기타

1️⃣미들웨어

미들웨어를 사용하면 Action 객체가 Reducer에서 처리되기 전에 다양한 작업을 수행할 수 있다

- 특정 조건에 따라 액션이 무시되게 만들기

- 액션을 콘솔에 출력, 서버에 로깅 등

⭐비동기 작업을 처리하는데 유용

 

2️⃣유용한 함수와 Hooks

- connect 함수 : Redux의 상태 또는 Action 생성 함수롤 컴포넌트 props로 받아올 수 있음

- useSelector, useDispatch, useStore : React-redux에서 지원하는 유용한 Hooks

상태를 손쉽게 조회, Action을 쉽게 디스패치 등

 

- connect와 useSelector 함수는 자체적으로 memoization 동작

- 반면, Context API를 사용하면 context의 상태가 바뀌면 context provider가 감싸는 컴포넌트가 모두 리렌더링

 

3️⃣하나의 큰 상태

- Context API는 필요할 때마다 독립적인 Context를 만들어야 하는 반면,

- Redux에서는 모든 전역 상태를 하나의 상태 객체에 넣어서 사용하여 간편함

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • Redux의 3가지 규칙
  • Action, Reducer, Store, Dispatch
  • [원티드 FE 프리온보딩] 4-3 의존성
  • [원티드 FE 프리온보딩] 4-2. 횡단 관심사
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516)
      • 🎨 프론트엔드 공부 (253)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
Redux를 사용하는 이유 3가지 (vs Context API)
상단으로

티스토리툴바