backend

1. npm init -y
2. "main": "app.js"
3. git init
4. npm i express

---

Redux

사용하는 이유: Redux가 없을 때에는 React가 렌더링과 데이터 관리를 다 하게 되지만, 컴포넌트가 많아지게 된다면 데이터를 주고 받는 데 어려움이 발생하기 때문에 Redux와 React의 역할을 분류해 준다
reducers - 생성된 경우에 사용함
extraReducer - 갱신되는 경우에 사용함. Thunk를 사용해 비동기 3가지 상태를 만들어줘야함.

• App에서 데이터를 자식컴포넌트에 props로 넘겨준다

• 자식 컴포넌트가 많아지면 데이터를 props로 받아서 쓰는게 복잡해진다
• Redux를 통해 데이터를 따로 관리하는 라이브러리를 만들어주고, React를 통해 렌더링만 진행하여 효율성을 높인다
  

appSlice

thunk, slice 는 한묶음

• 백엔드에서 받아온 return 값은 appSlice의 builder.addCase의 action에 담겨있다

createAsyncThunk

thunk -> redux로 비동기 처리하는 것!

• 1번 thunk -> appSlice에 부착해준다
  • appThunk의 return 값은 appSlice의 action.payload에 들어있음

useDispatch

• react component 에서 thunk 함수로 인자를 보낼 때 dispatch를 사용함