1. External Store

• 관심사의 분리

• Layered Architecture

• Flux Architecture

• useReducer

• useCallback

관심사의 분리(Seperation of Concerns, SoC)

• 프로그램을 관심사에 따라 모듈화 하는 것

• 정보를 잘 정의된 인터페이스기 있는 부분안에 캡슐화 시키면서 달성

• 코드의 단순화 및 유지보수에 도움

• 다른 부분의 세세한 사항을 모르더라도 관심사의 코드 부분을 개선할 수 있음

• 추상화의 일종

Layered Architecture

• 관심사의 분리의 구현

• 각 계층은 어플리케이션 내에서 특정 역할과 관심사별로 구분

• UI를 다루는 부분/ 비즈니스 로직을 다루는 부분/ 데이터를 다루는 부분

• Input/ Process/ Output

• MVC : Controller / Model / View

Flux 아키텍처

• MVC는 양방향 데이터 흐름을 가지고 있기 때문에 점점 더 복잡해짐

• Flux 아키텍처는 단방향 데이터 흐름 아키텍처

• Action -> Dispatcher -> Store -> View의 단방향 아키텍처

  • 사용자의 action이 발생하면 dispatcher가 여러 store들에 action을 전달하고 store에서 상태가 변경되면 view에 반영됨

• Redux는 단일 Store를 사용해 Action -> Store -> View의 단방향 아키텍쳐를 가짐

  • action이 발생하면 reducer를 통해 state를 변경

External Store

• Store가 리액트 밖에 있음

내가 이해한 external store의 컨셉

• 컴포넌트의 상태가 변하면 재렌더링을 한다

• 그렇다면 상태가 바뀌기만 하면 바꾸고자 하는 값을 useState로 관리하지 않아도 원하는 타이밍에 재렌더링만 호출 할 수 있다

이걸 이용해서

• useForceUpdate 훅을 만들어 안에서 state를 가지고 있음

• 이 훅은 state를 새 객체(의미있는 값은 아니다)로 업데이트 하는 함수를 리턴

• 이 함수를 호출하면 state가 변경됨

• 컴포넌트안에 관리하고 싶은 값을 변경하고 useForceUpdate를 호출하면

• 이 값이 state로 관리되지 않아도 재렌더링 가능해짐

이를 통해 비즈니스 로직과 UI구현을 분리할 수 있다 -> 관심사의 분리

useReducer

const [<상태 객체>, <dispatch 함수>] = useReducer(<reducer 함수>, <초기 상태>, <초기 함수>)

• reducer 함수 : state와 action을 인자로 받아서 새로운 state를 리턴하는 함수

• dispatch 함수 : 상태 변경을 일으키기 위해 action을 인자로 받아 reducer에 넘기는 함수

• action 객체 : 어떤 행동인지를 나타내는 type 속성과 그에 관련된 데이터를 가지는 객체

• 즉, dispatch에 action을 주면 reducer가 그에 맞게 state를 변경해줌

import React, { useReducer } from "react";

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      <h2>{state.count}</h2>
      <button onClick={() => dispatch({ type: "INCREMENT", step: 1 })}>
        증가
      </button>
      <button onClick={() => dispatch({ type: "DECREMENT", step: 1 })}>
        감소
      </button>
    </>
  );
}

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case "INCREMENT":
      return { count: state.count + action.step };
    case "DECREMENT":
      return { count: state.count - action.step };
    default:
      throw new Error("Unsupported action type:", action.type);
  }
}

useCallback

• 함수 메모이제이션을 위해 사용되는 hook

• 첫번째 인자로 넘어온 함수를 두번째 인자로 넘어온 배열의 값이 변경될 때까지 저장하고 재사용할 수 있게 해줌

• 컴포넌트안에 있는 함수를 useCallback으로 넘기면 컴포넌트가 재렌더링되도 새 함수를 만들지 않고 기존함수를 계속해서 반환

• 배열에 넣은 값이 바뀌면 새 함수를 만듦

const add = useCallback(() => x + y, [x, y]);