오늘 공부한 것

by 기술매니저님

1. Redux Toolkit

1. module

• middleware : BE에서 받은 데이터 받아와서 중간다리 역할 하는 것.
• Action_value, Action_Creator initialState 보완 -> 툴킷!(얘네가 필요 없다.)
• 툴킷은 "..." 을 쓸 필요가 없다 : 불변성 알아서 유지해준다.

// 기본 모양
const todoSlice = createSlice({
	name : 'todo',
  	initialState,
  	reducers : {
    
    }
})

---
      
const todoSlice = createSlice({
	name : 'todo',
  	initialState,
  	reducers : {
        addTodo : (state, action) => {
        todos = action.payload,
          // todos에 action.payload를 담겠다. 이게 끝...
        },
          
       deleteTodo 등....
    }
})

2. configStore

• 모듈의 내용을 통합시켜주는 역할(combinereducer)
  = but 툴킷에서는 다르게 쓰인다.
  =>

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

3. Dispatch, useSelector

(module에서)
export const (addTodo) = todoSlice.action
====
(컴포넌트)
dispatch(addTodo())

2. 동기 / 비동기

동기 : 마무리 된 다음에 시작되는거
비동기 : 끝나지 않아도 다른 행동이 실행되는 것

• 왜 비동기 ? : 서버에서 데이터 불러오는 작업(검색결과 등) 백에서 받아온 다음 뿌려져야 하는데 응답이 오기 전에 렌더링(빈화면이 되어 버림) 방지 예시
  비동기 처리 하기 위해서 async / promise 써주고 있다.
• promise : 프로미스 생성 후 then으로, catch로 비동기를 동기처리 해주는 것.("비동기 처리를 한다.": 비동기를 동기처럼)
• async - await : promise와 완리는 유사.
• DB에 데이터 받고 보내고하는 middle ware에서 사용. 데이터 요청 후 받아오는 과정에서 계속 올 때 비동기 처리를 해줘야 함. 원하는 값 처리해서 가공해서 쓸 수 있게 해주는 역할.
  => async 함수 안에서 있어야 await도 실행 -> promise처럼 then, catch사용할 수 있게 해주는게 await (프로미스 없어도 역할 가능)-> then or catch

  axios console.log 찍어보면 익히기 쉽다.

참고해야할 블로그

3. Axios

• BE와 데이터 소통하기 위한 라이브러리

코드를 일단 써보자. 깊게 이해하는 건 나중에 하자.

4. 미들웨어

중간다리

• 서버랑 소통을 할 때 스토어로 값을 저장시켜주는 역할 함
• 리엑트에서 dispatch(미들웨어 함수) -> 미들웨어로 보냄 -> axois 요청 -> 서버로 가서 작업(삭제 등) -> 나머지 데이터를 미들웨어로 보내줌 - dispatch -> action -> reducer -> store로 저장