context & redux 비교

전역상태 관리

• props drilling

• context API(리액트 자체 API. Redux 불편해서 나온거)

• Redux(클라이언트 사이드, propsDrilling 개선하기위해)

• Zustand, Recoil(리덕스 작성의 불편함을 개선)

• Reactquery(목적 차원에서 리덕스가 해결해주기 어려운 부분을 해결해주기위해) (서버사이드)

자식에 있는걸 부모에도 사용하고 싶을때?

자식에 있는 스테이트를 끌어올리고, 자식도 써야하니까 다시그걸 props로 내려줌

context API

만든다

• createContext(initialValue)
• 초기값 넣어주기(value 를 사용할거라 의미가 없긴함ㅎㅎ)

사용한다

• useContext(ProfileContext)

문제점.

• 필요한곳 외에도 렌더링이 됨

범위지정

• Provider

• 이걸 작성할때는 const {AContext}.Provider(대문자로)

• HelloContext.Provider value = {}

프로처럼 쓰려면

• 컴퍼넌트에 Provider 를 따로 만들어.

export function ProfileProvider({ children }) {
  .
  .
  .
  

  return (
    <ProfileContext.Provider value={value}>{children}</ProfileContext.Provider>
  );

왜 App.js 에 안쓰고 이렇게 따로 빼서 쓸까??

• 공식문서에서도 보면 context API 를 잘모르고 사용하면 리렌더링이 많이 발생할 수 있는데...
• App 에 넣으면 부모 컴퍼넌트가 리렌더링 되었을때 전부 리렌더링 되기 때문.

=> 직접렌더링 하는게 아니라..

• Provider 아래 모든걸 넣는건 맞아. 여기에 다 넣어야 컨텍스트를 쓸 수 있으니.
• context 의 방법은 두가지. 1. Provider 에서 직접 넣는 방식 2. 직접 안넣고 children 으로 내려주는법.

이중 2번을 선택하는게 최적화에 효율적!= > 자식(내용) 끌어올리기.

아래 들어갈것들을 children 으로 받았으니 App이 리렌더링 되지 않게 하면돼.

App{

<AuthProvider>
<HomePage />
<AuthProvider />
  }

따로 뺴서 쓰면 AutoProvider만 리렌더링돼.

---

redux

• 내가 구독한 값이 변할때에만 redux를 사용

• isLoggedIn 과 바뀌는 userId 의 구조일때,

데이터 변경 흐름 순서 복습!

• store

• reducer 안에는 작업타입들이 있음...(Action.type)

• 매번 지시서 쓰면 불편하니까 , action create(작업지시서 작성)를 공장에서 줘.

• 그래서 컴포넌트는 action에 type, payload 를 넣어서 dispatch(요청)해.

데이터 사용할때 복습!

• useSelector()
• useDispatch()

---

Redux로 장바구니 reducer를 구현

---

immer js

immer.produce( 남자1, (draft) => {
draft.hobbies
  .find((hobby) => hobby.name === "코딩")
  .stories.find(())
  .images.push();
  ...
}) 

• 하면 마음대로 조작가능한 draft를 사용할 수 있어. (객체의 내용을 변경하는 방식을 사용하되) 기존 객체의 내용을 변경하지 않게 해줌.

• 새로운 객체 상태를 만들어주기 위해서 예전에는 다 펼쳐주고 했는데,

• immer js 에 기존 상태를 넣으면 immerjs 가 draft(초안)을 준다. 펼칠 필요가 없어서 ...찍고 변경하고, 가져와서 쓰면됨

produce(변경하고싶은값, 레시피가될 callback 함수)

---

reduce 의 immer

import { createSlice } from '@reduxjs/toolkit'

const initialState = { value: 0 }

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment(state) {
      state.value++
    },
    decrement(state) {
      state.value--
    },
    incrementByAmount(state, action) {
      state.value += action.payload
    },
  },
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer

• reducers 보다는 actions 가 의미가 더 잘맞긴 하지만 그냥 저게 관습