React_REDUX 설명

1. Redux 란?

 Redux  : a predictable state container for JavaScript apps.

상태 관리 라이브러리

 

 

React에는 대표적으로 >>  Props vs State 개념이 있다.

-Props

1) properties의 줄임말로

2) 컴포넌트 간(부모, 자식, 형제 등)에 소통할 때 Props가 있어야 한다.

3) 소통 방식 : 상하 :  (부모<>자식 간에만 주고받을 수 있다.)

4) 부모 comp에서 설정하면 상속된 자식 compo에서 props의 설정을 바꿀 수 없다.

 

-State

1) State으로 component 안에서 데이터를 전달한다. (부모, 자식 상관x, 전역)

2) 그냥 안에서 설정, 상태를 변경할 수 있다.

3) state이 변하면 re-render된다.

 

 

 

***Redux가 없다면..

데이터에 변경이 있을 때 부모>부모>... 타고 올라가야 하므로 복잡해진다.

 

>> 훨씬 편하게 상태를 관리하게 된다.

 

 

 

2. Redux Flow

 

1) 한 방향으로 흐른다.

*ACTION : 어떤 액션이 일어났는지에 대해 설명함

  (ex. 좋아요 누름, 패치에 성공함, 할일을 추가함 등)

*REDUCER : previousState와 action을 받고, nextState를 return함

*STORE : 전체적인 State를 감싸줌 / 메소드로 State 관리함

 

 

action, reducer 상세설명

 

 

3. Redux Setting

 redux / react-redux / redux-promise / redux-thunk   설치

 

 

** <Provided> </Provided>

: React와 Redux를 연결시킨다. (redux에서 제공하는 태그)

**redux-promise, redux-thunk

: 리덕스 미들웨어

: STORE에서 object(객체) 형식의 ACTION만 받는 것이 원칙.

 

BUT, promise 형식 & functions 형식 존재

∴ redux-promise > STORE에서 promise 형태 받도록 & redux-thunk > functions 형태 받도록

 

 

★★★★

리덕스는 왜 쓸까?

me2.do/FmbLq387

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i) | VELOPERT.LOG