React01 :: react 복습

예전에 해봤었던 react를 복습..

 

ㅡ. React Hook

function 단위로 시작되는것을 말한다. 즉, class없이 state를 사용할 수 있는 기능이다. 

 

ㅡ. Provider

react로 작성된 컴포넌트를 Provider안에 넣으면 redux store에 접근이 가능하다.

ㅡ. Connect()

Provider 컴포넌트 하위에 존재하는 Component 가 Store에 접근하게 만드는 역할 수행

ㅡ. mapStateToPros

connect 함수에서 첫번째 인수로 들어가는 함수, store가 업데이트 될때마다 자동적으로 호출된다.

ㅡ. mapDispatchToProps

connect 함수에서 두번째 인자로 들어가는 함수다.

 store에 접근한 컴포넌트가 store 상태를 바꾸기 위해서 dispatch 사용할 수 있게 한다. 

ㅡ. Store

Store에 수행할 작업이 있으면 Action을 발행합니다. 이를 Store가 Action의 변화를 감지해서 State가 갱신됩니다.

ㅡ. Reducer

이전 상태와 Action을 합쳐서 새로운 state를 만드는 것을 의미합니다.

 

ㅡ.  CombineReducers

combineReducers는 여러 Reducer들을 합쳐서 하나의 Reducer로 관리할 수 있게 만들어줍니다.

 

ㅡ. Component

React의 Component 는 Redux 에서 사용하기 위해서는 connect 함수를 사용합니다.

 

ㅡ. 전체 플로우

Component가 Store로부터 정보를 받을때 props 로 받게된다. props = immutable하다. 이말은 상태가 변경될때마다 새 Component가 만들어집니다.

mapStateToProps : Store가 가지고 있는 state를 props에 함께 엮을 때

mapDispatchToProps : action을 알리는 함수 dispatch를 어떻게 props에 엮을지

 

*ref : https://medium.com/@ca3rot/%EC%95%84%EB%A7%88-%EC%9D%B4%EA%B2%8C-%EC%A0%9C%EC%9D%BC-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-%EC%89%AC%EC%9A%B8%EA%B1%B8%EC%9A%94-react-redux-%ED%94%8C%EB%A1%9C%EC%9A%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-1585e911a0a6

아마 이게 제일 이해하기 쉬울걸요? React + Redux 플로우의 이해

https://velog.io/@jeonghoheo/Redux-React-%EC%9A%94%EC%95%BD

Redux-React의 기본