Context api, Redux, Mobx, SWR

Context Api

• 정의
  일반적의 react상에서는 데이터가 부모로부터 자식에게 전달되지만 여러 컴포넌트에서 전달받아야 하는 props의 경우에는 번거롭기도하고 파일의 양이 많아지면 이게 어디서 어디로 전해지는건지 알아보기 힘들어진다. 이럴 때 Context를 이용하면 props를 사용하지 않아도 값을 공유할 수 있다.

• 사용법

import { createConText } from 'react' // react에서 제공하는 createContext를 사용해서 생성한다.

export const GlobalContext = createContext ({
  name: "",
  setName: (_ : any) => {}
})
// createContext 함수의 인자값으로 관리할 state를 객체 형태로 담아준다.

function MyApp({ Component, pageProps }) {
  const [name, setName] = useState("codeCamp");
  ...
// 설정한 State 값들은 useState를 이용하여 생성

**반드시 Context에 설정된 key 이름과 State로 생성한 key 이름을 동일하게 설정해야한다.

return(
<GlobalContext.Provider value=({
  name, setName
  })>
  <ApolloProvider client={client}>
    <Component {...pageProps}/>
  </ApolloProvider>
</GlobalContext.Provider>
)
// app.tsx가 페이지를 그려내는 부분인 return에서 전체 페이지를 Context로 감싸준다.

export default functon ContextPage(){
  const {
    name, setName
  } = useContext(GlobalContext);
  //사용하려는 페이지에서 불러서 사용한다.
  
  return(
  	<div>
      저의 이름은 {name}입니다.
    </div> // 저의 이름은 codeCamp입니다.
  )
}

---

Redux

• 정의
  리덕스는 flux 개념을 바탕으로한 리액트내에서 가장 사용률이 높은 상태관리 라이브러리이다. 이를 사용하여 컴포넌트들의 상태관련 로직들을 다른 파일들로 분리시켜 보다 효율적으로 관리할 수 있다. 리액트뿐만 아니라 다른 프레임워크에서도 사용할 수 있다.

• 세가지 원칙

1. Single source of truth: 하나의 어플리케이션은 하나의 Store안에 객체 트리 구조로 저장된다.

동일한 데이터일 경우 store라는 데이터 공간에서 관리하는데, 이러면 디버깅이 쉬워지고 서버와의 직렬화가 가능하다. 또한, 클라이언트에서 데이터를 쉽게 받아올 수 있다.

2. State is read-only: 상태는 읽기 전용이고, 상태를 변화시키는 유일한 방법은 액션 객체를 전달하는 방법뿐이다.

state는 reducer에서만 할 수 있으며, 직접 변경해선 안된다.이는 reducer 이외의 공간에서는 state가 읽기 전용이라는 것을 알 수 있다.
데이터는 부모컴포넌트에서 자식컴포넌트로만 흐르기 때문에 이를 통해 상태 변경에 대한 추적이 편리해진다.

3. Changes are made with pure functions: 리듀서는 순수 함수여야 한다.

reducer 새로운 state object를 통해 return 해야한다.
동일한 파라미터로 호출된 reducer는 순수함수이기 때문에 항상 같은 결과값을 반환한다.

---

Mobx

• 정의
  State관리 라이브러리로 객체지향 느낌이 강하고, 번잡한 보일러 플레이트코드들을 데코레이터 제공으로 깔끔하게 해결한다.

• 장점

1. 객체지향적이기 때문에 로직을 분산시켜 상호작용을 메세지를 주고받는 식으로 구현할 수 있다.

2. 캡슐화를 통해 state를 오직 메소드를 통해 변경할 수 있도록 private하게 관리할 수 있다.

3. 불변성 유지를 위한 노력이 불필요하다.

---

SWR

• 정의
  Stale-While-Revalidate의 줄임말로, Next.js를 개발한 zeit 그룹에서 사용하는 라이브러리다.

• 특징

1. useSWR 자체적으로 useEffect처럼 동작하기 때문에 uesEffect안에서 사용할 수 없다.

2. 백그라운드에서 캐시를 재검증하는 동안에 기존의 캐시 데이터를 사용하여 화면을 그려준다.

3. 도중에 에러를 반환하더라도 캐시 데이터를 활용하여 불필요한 데이터 호출과 렌더링에 시간을 허비하지 않고 효율적으로 동작한다.