Redux_TIL(29)

리액트 입문과정이 끝나자마자 아직 투두리스트를 만들어보지도 못했는데 숙련회차를 듣게 되었다.😂

사실 입문과정에서 props랑 state가 이해가 되야한다고 해서 아직 스스로 그 부분이 부족하다는 생각에 숙련강의는 안 듣고

입문강의만 계속해서 공부를 하고 있었다.(주말에 todoList📖 만들어보려고 함)

근데 오늘 튜터님 리덕스 강의가 있다는걸 알고 급하게 조금이라도 알고 시작하자는 마음에 강의를 뒤늦게나마 보기 시작했는데

그래도 튜터님 강의를 듣고나서 공부를 하니까 훨 이해가 잘 됬다. 혼자 들을 때 외계어인줄..ㅎ

그래서 그걸 오늘 주제로 적어보려고한다.

---

기본적으로 redux에 필요한 패키지들을 설치하고나서 시작해야 된다.

(내가 맨날 이런거 설치도 안하고 왜 안되냐 하고 있어서 나중에 내가 봐도 안 잊어버리게 적어놔야지....ㅋㅋ)

그리고 주신 강의를 토대로 코드들을 기록함!(카운터를 만들어보려고 함)

1.Modules 파일

처음에 리둑스 사용 전 useState를 이용해서 초기값을 지정했었다.

const initialState={
 number : 0,
};

이렇게 모듈파일안에 초기값을 넣어준다. 지금은 number가 0이다. 이 부분이 이제 버튼을 누르면 숫자가 올라갈 부분이다.

즉, 버튼을 누르면 +1 or -1이 적용되서 그 값이 리랜더링이 되는 부분

 

<reducer의 기본 구조>

const counter =(state=>initialState , action)=>{
   switch(action, type){
   
   default:
       return state;
       }
}

리둑스는  인자로 initialState, action을 받는다. 추후에 정리하면 저기에 왜 저 인자가 필요한지 알 수 있다.

그리고 switch문을 통해서 값 변경을 인식하고 변경한대로 결과값을 리턴해준다.

---

 

ㅣ똥손

Redux는 이런 구조를 가지고 있다.

저기 그림에서 적어논 것 처럼 reducer가 store안에 있고 store에 있는 데이터를 바꿔주는 역할을 reducer가 한다고 생각하면 된다.

저기서 말하는 action은 dispatch라고 한다. 네이버 찾아보니까 보내다? 이런 뜻이더라서 action을 보낸다라는 뜻으로 이해함!

 

---

2.Store에 연결하자!

위 처럼 만든 modules를 store에 연결안해주면 무용지물이다.

연결은 configure.js에서 import를 통해서 연결이 가능하며, import는 module안 reducer이다 (예시 코드로는 counter를 말한다.)

그리고 rootReducer안에 counter: counter,로 해준다.

 

이 연결 부분은 내가 modules를 추가할때마다 반복해주면 된다. 계속 연결을 해줘야 쓸 수 있으니까!

 

---

3.연결 확인

개인적으로 여기가 젤 어려웠다..

Component 에서 store을 조회해보면 된다.(component에서 store을 가져온다.)

방법은?! userSelector을 이용한다. (react-redux의 hook을 사용한다. import{useSelector} from ./React를 이용한다.

const App=()=>{
  const counterStore = useSelector((state)=>state);
    return <div></div>
 }

저기서 state는 module안의 모든 state를 가져올 수 있다.

이 state들에서 내가 필요한 데이터만 꺼내서 쓰려면?!

▷const number = useSelector((state)=> state.counter.number)

   console.log()로 확인해보면 counter : {number: 0}

 

const counter =(state=>initialState , action)=>{
 ...
}

const initialState={ number : 0, };

👆👆이렇게 확인이 가능하다.

---

<정리하자면>

modules의 구성요소(initialState(초기값), reducer(바뀐값을 인식하는 부분))

->

store에 연결 (configureStore.js의 root reducer안에 넣어준다.)

->

component에서 store조회 (useSelector사용)- useSelector,state는 모든 module의 state값을 조회할 수 있는 값

 

 그니까 그냥 state가 한 곳에 다 모여있으니 나는 선택해서 꺼내쓰기만 하면된다.😎