리덕스를 공부하니까 그 뭐지 뭐야... 까먹음 ㅋㅋㅋㅋㅋㅋㅋㅋ
아 state관리를 위한 라이브러리임을 알게되었고, Flux구조를 가진 상태관리 라이브러리 인걸 알게되었는데, 리덕스는 복잡하고 어렵다.

코찔이인 나에게는 너무나 어렵다.. 그래서 16버전 부터 새로도입된 react 내장 context에 대해서 먼저 공부해보기로 했다. 지금 내가하는 프로젝트는 규모가 큰 편도 아니고, 각각의 user state만 저장해서 쓰면 될 정도라, 복잡한 리덕스를 사용하기보다 개념도 익힐 겸 좀 더 가벼운 context를 쓰려고 한다.

React Context

🔹 도입배경

context가 도입한 배경 또한 MVC구조의 복잡성을 느껴서이다. 사실 나는 큰 프로젝트를 해본적이 없어서 큰 필요성이 와닿지 않지만 만약 컴포넌트가 100개고, 페이지가 50장이 넘어간다고 생각하면 100만퍼 필요하다고 느껴졌다,,,

◼️ 리액트가 제안하는 context

context의 주된 용도는 다양한 레벨의 많은 컴포넌트에게 데이터를 전달하는 것이다. context를 사용하면 컴포넌트를 재사용하기 어려워지므로 꼭 필요할떄만 사용하라고 권장한다.

같은 데이터 트리 안 여러레벨이 있는 많은 컴포넌트에 state를 주어야 할 때도 있다. 이런 데이터 값이 변할 떄마다 모든 하위 컴포넌트에게 널리 방송하는 것이 Context이다. 데이터 캐시 등을 관리하는 데 있어서는 일반적으로 context를 사용하는 게 가장 편리하다.

🔹 API

◼️ React.createContext

const MyContext = React.createContext(defaultValue);

context 객체를 만드는 주문. context 객체를 구독하고 있는 컴포넌트를 렌더링 할 때 가장짝이 맞는 Provider로부터 현재값을 읽는다.

defaultValue 매개변수는 트리 안 적절한 Provider를 찾지 못할때만 쓰이는 값이다. Provider를 통해 undefined 값을 보낸다고 해도 구독 컴포넌트 들이 defaultValue를 읽지 않는다.

◼️ context.Provider

<MyContext.Provider value={/* 어떤 값 */}>

Provider는 Context를 구독하는 컴포넌트들에게 Context의 변화를 알리는 역활을 한다.

Provider 컴포넌트는 value prop을 받아서 이 값을 하위에 있는 컴포넌트에 전달한다. 컴포넌트의 갯수 제한은 없으며, 하위 컴포넌트에 하위 컴포넌트가 있다면 최상위에있는 Provider의 값이 우선시된다.

Provider 하위에서 context를 구독하는 모든 컴포넌트는 Provider의 value prop이 바뀔때마다 렌더링되지만, Consumer로의 전파는 상위 컴포넌트가 업데이트를 건더 뛰더라도 consumer가 업데이트 된다.

◼️ Context.Consumer

<MyContext.Consumer>
  {value => /* context 값을 이용한 렌더링 */}
</MyContext.Consumer>

Context 변화를 구독하는 React 컴포넌트이다. 이 컴포넌트를 사용하면 함수 컴포넌트 안에서 context를 구독할 수 있다.

Context.Consumer의 자식은 함수여야만 한다. 이 함수는 context의 현재값을 받고 , 이 함수가 받는 value 매개변수 값은 context의 Provider 중 상위 트리에서 가장 가까운 Provider의 value Prop과 동일하다.

🔹 Hooks

◼️ useContext

const value = useContext(MyContext);

context 객체를 받아 그 context의 현재 값을 반환한다. context의 현재값은 트리안에서 가장 가까운 Provider의 value prop에 의해 결정된다.

컴포넌트에서 가장 가까운 <MyContext.Provider>가 갱신되면 그 Provider에게 전달된 가장 최신의 context value를 사용하여 렌더러를 트리거한다.

useContext로 전달한 인자는 context 객체 그 자체임. 메서드 형식으로 받아올 수 없음.

useContext는 <MyComponent.Consumer>와 같으며, context를 읽고 구독하는 부분만 가능하며, context의 값을 설정하기 위해서는 Provider가 필요하다.

◼️ useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState의 대체함수이다. (state,action) => new State 형태로 reducer를 받고 dispatch 매서드와 짝의 형태로 현재 state를 반환한다.

state가 이전 state에 의존적인 경우에 보통 useReducer를 선호한다.

그 이유는 콜백대신에 dispatch를 전달할 수 있기 때문이다. setState 하나의 state를 받을 수 있지만, dispatch는 여러개의 state를 전달하고 핸들링 할 수 있기 때문이다.

다음포스팅은 예제를 통해서 하나씩 감을 잡아볼꺼다.
몇일 전 제사였는데 언니가 감을 가져왔는데 참 맛났는데, 감이 먹고싶다.