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]);

Previous6주차 Next2. Tsyringe

Last updated 1 year ago