무작정 따라해본 Redux toolkit (1)

https://www.youtube.com/watch?v=bbkBuqC1rU4&t=149s 

 

Store.js

import { configureStore } from "@reduxjs/toolkit";

export const store = configureStore({
  reducer: {},
});

 

 

Slice 

슬라이스라는 걸 배웠는데 useReducer를 사용할 때 처럼 초깃값을 넣어주나보다.

감속기를 장착한다나 뭐라나..

 

전역 state 가 어떻게 변하는지 확인할 수 있다. 

이것때문만이라도 쓸 수 있을 것 같다. 너무 편리한 기능이다.

 

useSelector를 사용해서 하나의 값에 접근할 수 있었다.

 

그냥 구조분해 할당을 사용할 수 도 있었다.

 

https://heroicons.com/

Heroicons

 

이런 귀여운 아이콘 사이트도 있었구나.

copy JSX 해서

 

export 하여 아이콘을 사용하면 된다.

 

 

갑자기 문뜩 든 생각인데,

최근에 jsx 렌더링에서 즉시실행 함수를 사용해서 분기를 걸어 컴포넌트를 렌더링 했다.

이 코드를 보니까 이런식으로 분기를 나눌 수도 있겠구나 생각이 들었다.

 

 

props 를 스프레드 연산자 써서 한방에 넘겨줄 수 있다는 것 처음 알았다..

 

 

 

위 두 코드의 구조가 다른데요.

{payload} 로 받는다면 

이렇게 여러개의 값을 넘길 수 있었습니다.

 

 

소숫점 2자리까지

 

state 가 변경될때 마다 useEffect로 (calcuateTotals()) 함수를 실행시킨다.

 

 

 

이제 조금 익숙해진 것 같아서 강의를 보기전에 한번 생각해보고 로직 짠다음 듣고 있는데

 

Modal 컴포넌트를 다음과 같이 if 문을 사용해서 렌더링했다.

 

이렇게 렌더링 해버리네 어떻게 이렇게 창의적으로 똥로직을 짜는거지 나는..