[React]React Redux란?

2024. 2. 2. 02:21·React
목차
  1. ⭐ Redux와 React
  2. ⭐ 그래서 Redux란?
  3. ⭐ Redux 구성 요소

⭐ Redux와 React

Redux에 대해 설명하기 전에 Redux와 React의 관계에 대해 먼저 알고 가자!
Redux는 상태 관리 라이브러리이다.
지금까지 "Redux는 React에서 쓰는 라이브러리다"라고 알고 있었는데 잘못된 지식이였다..
Redux는 JavaScript의 상태 관리 라이브러리 중 하나일뿐, React에 종속된 기술이 아니다!!
React Redux라는 React 전용 상태 관리 라이브러리가 따로 존재한다.
이 글에서는 React Redux에 대해 설명할 것이다.
아래에서 Redux라 부르는 것은 모두 React Redux다!!


⭐ 그래서 Redux란?

React에서 state는 컴포넌트 안에서 관리 되는데,
자식 컴포넌트끼리는 데이터를 주고 받을 수 없어서 부모 컴포넌트를 거쳐야 한다.
간단한 프로젝트라면 로컬에서 상태관리를 해도 되지만, 프로젝트의 규모가 커질수록 코드가 복잡해진다.


Redux를 사용한다면 state를 하나의 공간에 모아두고 전역으로 관리할 수 있어서
코드 가독성도 좋아지고 상태 관리가 편리해진다는 장점이 있다!


⭐ Redux 구성 요소

  • Action
    애플리케이션에서 스토어에 운반할 데이터를 말함.
    자바스크립트 객체 형식으로 되어있음.
    type 필드(=액션의 이름)는 필수임!
    상태에 어떤 변화가 필요하면 액션이라는 것이 발생🚨
  • Dispatch
    액션을 발생시키는 역할
    전달받은 action을 state와 함께 reducer에 다시 전달
    이 함수가 호출되면 store는 reducer()를 실행시켜서 상태를 변경 함.
  • Store
    애플리케이션의 state(상태)를 저장하는 곳.
    하나의 프로젝트에는 오직 하나의 store만 존재함.
    컴포넌트에서 상태 정보가 필요할 때 store에 접근함.
  • Reducer
    상태 변화를 일으키는 함수.
    Action을 Reducer에 전달 ➡️ Reducer가 Store의 상태를 업데이트
    Action을 Reducer에 전달하기 위해서는 dispatch() 메소드를 사용해야 함.

 

'React' 카테고리의 다른 글

[React]Redux-Logger  (0) 2024.02.08
[React]Redux 사용방법  (1) 2024.02.08
[React] API 통신 - axios  (0) 2024.01.16
[React]리액트 훅 & Life Cycle  (0) 2023.10.04
[React]아토믹 디자인(Atomic Design) 패턴  (0) 2023.09.21
  1. ⭐ Redux와 React
  2. ⭐ 그래서 Redux란?
  3. ⭐ Redux 구성 요소
'React' 카테고리의 다른 글
  • [React]Redux-Logger
  • [React]Redux 사용방법
  • [React] API 통신 - axios
  • [React]리액트 훅 & Life Cycle
>동구리<
>동구리<
  • >동구리<
    데굴데굴 굴러가는 히동구리
    >동구리<
  • 전체
    오늘
    어제
    • 분류 전체보기
      • WEB
      • HTML,CSS,JS
      • React
      • 개발
      • Git
      • 이것저것
      • Algorithm
        • Programmers
        • Study
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    border vs outline
    이벤트 전파
    js 동작원리
    ouline
    adaptive jitc
    JITC
    리액트 #React #아토믹디자인 #아토믹디자인패턴
    http1
    배열 생성
    리액트 #React #생명주기 #Lifecycle #훅 #Hook
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
>동구리<
[React]React Redux란?
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.