[React] Redux 기초

https://youtu.be/dJC_uAR7d60?si=mSyXxNP_wvjcaz-Q

 

본 포스팅은 John Ahn 님의 유튜브 강의를 참고했습니다.

 

 

 

React에서는 Props와 State라는 것이 있습니다.

 

먼저 Props는 Properties의 줄임말로

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 넘길 때

 

넘겨지는 데이터를 Props라고 합니다.

 

Props는 자식 컴포넌트로 일단 보내지면 변경될 수 없고

 

Props를 다시 내려줘야 변경할 수 있습니다.

 

 

 

State은 부모 컴포넌트 안에서만 데이터 교환을 이뤄질 때의

 

데이터를 State이라고 하고

 

변경될 수 있는 특징이 있습니다.

 

 

Redux에서는  이러한 데이터를 직접 접근하여 상태 관리를

 

용이하게 해줍니다.

 

 

Redux에서 Action은 어떤 작업이 일어났는지 설명해주는 객체입니다.

 

ex) {type : LoginSuccess, response {id : 치킨, password : 1234}

 

 

Reducer는 Action으로 인해서 state의 변경점을 설명해주는 역할을 합니다.

 

ex) (PreviousState, action) => nextState

 

=> 원래 있던 PreviousState가 action으로 인해 nextState로 변함

=> PreviousState와 action을 파라미터로 받고 nextState을 리턴함

 

 

Store는 State들을 감싸고 관련한 여러 메소드를 제공합니다.

 

Store안에 있는 State은 Action을 통해서 변경할 수 있다.

 

 

Redux를 사용하려면 4가지 모듈을 다운 받아야합니다.

 

npm i redux react-redux redux-promise redux-thunk --save

 

이렇게 터미널에 입력하고 다운받아줍니다.

 

 

Store에는dispatch로 상태를 변경할 때 action객체가 와야만하는데

 

Redux-promise와 Redux-thunk는 각각 Dispatch에게 Promise와 Function도 허용할 수 있게 도와줍니다. - 에러방지 차원

 

 

Redux를 사용하려면 index.js로 가서 import부터 해야합니다.

 

import { Provider } from 'react-redux';

 

Provider라는 것을 import해와서

 

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

  <React.StrictMode>  

    <Provider>

    <App />

    </Provider>

  </React.StrictMode>

);

 

컴포넌트로 <APP/>을 감싸줍니다.

 

이렇게 하면 Redux를 연결해서 사용할 수 있게 됩니다.

 

 

 

Redux 관련 작업환경 설정이

 

계속 오류가 떠서 다음에 해봐야겠네요.

 

읽어주셔서 감사합니다!