대충 동작 원리는 어떤 action이 일어나면 Reducer가 (필요한 액션을 줄이고 걸러내서) store를 찾아 state변경 -> UI 자동으로 변경됨
자 이제 바로 설치해보자.
https://react-redux.js.org/introduction/getting-started 로 접속하여
터미널에 입력해주고 설치를 진행하자. + 여기에 npm i redux 이렇게도 쳐서 설치하자.
그리고 화면을 만들어보자.
그 다음
App.js에 상태값을 주고 Top에 number값을 넘겼다.
그리고 Top.js에서 지난 시간에 배웠던것처럼 props를 통해 number를 받아 화면에 뿌렸다.
다음 bottom에도 addnumber라는 함수를 만들어 넘겼다.
마찬가지로 bottom에서 함수를 받고 화면에서 증가버튼을 클릭하면 1이 2로 증가된 것을 볼 수 있다.
우리는 top쪽엔 상태를 bottom쪽엔 그걸 변경시키는 함수를 넣었는데 이런 뿌리가 20개,30개 있으면 밑으로 계속 넘겨야한다. 그렇기에 필요한 것이 store이다.
store.js를 만들고 어떤 액션과 상태를 만들것이다.
액션과 상태를 만들고 reducer라는 것을 만들어 액션의 결과를 걸러낸다
이 reducer는 외부에서 호출할 수 있는데 최초의 initstate값은 number 0이다. 그 다음 액션을 INCREMENT 액션을 날리면 reducer의 action부분에 이게 들어오고, action.type이 INCREMENT이니까 number의 상태값에 +1을 해서 리턴한다.
이게 리턴되면 호출한 쪽에서 받는게 아니라 리턴되는 순간, ui가 변경이 되는것, 이걸 받아서 뭘 처리하고 그런게 아니다.
![]
그리고 나서 index.js로 와서 저 코드를 입력하여 store를 만든다.
그리고 내 앱 모든곳에서 사용하기 위해 App.js를 <Provider></Provider>로 감싼다.
이렇게 하면 모든 App.js에 스토어에 담긴 것들이 전달된다.
App.js에서 기존 상태와 함수들 다 지우고,
Top.js에
const number = useSelector((store) => store.number);를 입력한다. 이건 store.js에 reducer에 있는 state값을 바로 가져오는 코드이다. state에 initstate를 넣었고 거기엔 number가 있었으니 number를 이렇게 가지고 올 수 있다.
store.js로 가서 number값을 1로 바꾸고 서버를 실행해보니 1이 잘 출력되어 있다.
이런식으로 store에 다 넣어놓고 필요할때마다 꺼내 쓰면 된다.
다음 bottom.js로 가서 useDispatch()(이걸로 store에 있는 action객체를 dispatch해줌)를 이용하여 dispatcher라는 변수를 만들었고 그 변수 안에 increase(아까 store.js에서 만들었던 액션) export const increase = () => ({ type: 'INCREMENT' }); << 요 부분의 액션을 넣어준다.
근데 이렇게하면 화면이 로드되고 바로 number에 3이라고 나올것이다. 화면이 그려지면서 바로 버튼에서 increase를 호출해버려서 그렇게 되는것이다.
코드를 이렇게 바꿔서 함수를 바인딩만 시켜주면
number에 정상적으로 1이 나오고
증가를 클릭할때마다 숫자가 1씩 증가한다(지금 4번 눌러서 5나옴)
감소라는 버튼도 바로 만들어주고, 증가, 감소 버튼을 번갈아 가며 눌러봤는데 잘 작동된다.
다음 데이터를 넘겨보자.
먼저 Bottom.js에서 increase 함수에 'kim'이라는 값을 넘기고
increase 함수의 매개변수로 받아서 payload라는 변수에 username을 넣는다.
그리고 이 increase함수는 reducer에서 action으로 받아서 이 action의 payload를 통해 username이라는 상태를 변경 시킨다.
이제 증가를 누르면 아무것도 없던 이름이 kim으로 변경된다.
오늘 게시글은 여기까지.
이 글은 유튜브 메타코딩 채널의 영상을 보며 공부한 내용을 기록한 게시글입니다.
