[TIL]2022.10.14

오늘 한 일
axios && redux toolkit
코딩알려주는 누나 강의 듣기 
주특기 심화 주차 S.A
React 심화 학습 자료

오늘 느낀 것
CRUD - 
GET - Read
POST - Create 
DELETE - Delete
PATCH - Update
API 명세서? 
PUT : 자원의 전체 교체, 자원교체 시 모든 필드 필요
       (만약 전체가 아닌 일부만 전달할 경우, 
        전달한 필드외 모두 null or 초기값 처리되니 주의)

PATCH : 자원의 부분 교체, 자원교체시 일부 필드 필요

useEffect로 어떤 state가 변경시 리렌더링 되게 해야함
Redux 미들웨어 : 액션과 리듀서 사이에서 함수를 실행하게 해줌
비동기형태로

1. extraReducers 사용: reducers에서 바로구현되지 않는 기타 Reducer로직을 구현할 때 사용하는 기능입니다. 보통 thunk 함수를 사용할 때 extraReducers를 사용합니다. 

2. **[중요 🔥]** **통신 진행중, 실패, 성공에 대한 케이스를 모두 상태로 관리하는 로직을 구현합니다.** **서버와의 통신은 100% 성공하는 것이 아닙니다.** **서버와 통신을 실패했을때도 우리의 서비스가 어떻게 동작할지 우리는 구현해야 합니다. 또한 서버와의 통신은 ‘과정' 입니다. 그래서 서버와 통신을 진행하고 있는 ‘진행중' 상태일때 우리의 서비스가 어떻게 작동해야할지 마찬가지로 구현**해야 합니다.
extraRecuders에서 아래와 같이 코드를 구현합니다. 

extraRecuders 에서는 아래와 같이  pending, fulfilled, rejected에 대해 각각 어떻게 새로운 state를 반환할 것인지 구현할 수 있습니다.

useMemo는 useCallback과 똑같은 기능을 하는 훅 입니다. 다만, 대상이 함수가 아니라 배열이나 객체와 같은 값일 때 사용합니다. 사용원리와 방법은 모두 useCallback과 같습니다.

## 주의사항

- `memo()`, `useCallback`, `useMemo` 의 **무분별한 사용은 오히려 퍼포먼스 성능에 악영향**이 될 수 있습니다.  반드시 리렌더링이 필요한 컴포넌트나 또는 값 (함수, 배열, 객체)에는 `memo()`, `useCallback`, `useMemo` 를 사용하는 것이 오히려 좋지 않습니다. 왜냐하면 `memo()`, `useCallback`, `useMemo` 를 사용하는 것은 리액트에게 **“렌더링 이후의 값과 전의 값을 비교해서 같으면 재생성하지마!”** 라고 주문을 하는거에요. 근데 **반드시 바뀌어야하는 값에 저 기능을 사용하면 굳이 비교하지 않아도 될 것들에도 리액트가 비교를 하기 때문**입니다. 

그렇기 때문에 저 기능을 사용하기에 앞서, 불필요한 리렌더링이 맞는지, 개선할 수 있는 부분인지 확인하고 사용하도록 하세요.

- `memo()` 를 사용하면 컴포넌트의 불필요한 리렌더링을 막을 수 있다.
- 다만, 컴포넌트의 `props`가 있는 경우 `useCallback`과 `useMemo`를 적절하게 사용하여 **리렌더링의 원인이 되는 것을 모두 제거해줘야 정상적으로 작동**한다.
- `useCallback`의 대상은 **함수**, `useMemo`의 대상은 **객체나 배열**과 같은 값이다.
- **원시타입 데이터는 `useMemo`를 사용하지 않아도 리렌더링하지 않습니다. → useMemo 안써도 됩니다.**


좋았던 점
git 난항이 예상됩니다
+ 과제도

난항을 해결하면 더욱 성장하기 때문에 좋습니다

개선점
git 난항이 예상됩니다

+ 과제도

내일 할 일
axios && redux toolkit 적용해보기
코딩알려주는 누나 강의 듣기 
React 심화 학습 자료