TIL_2023_07_28

Today 요약

1. 프로젝트에 리덕스 적용하기
2. 리덕스 공부하기
3. 면접대비

1. What I did?

1. 1 프로젝트에 리덕스 적용하기

현재 멘토님하고 계속 코드리뷰 진행하고 있는 프로젝트에 이제 마지막으로 리덕스를 적용해보려고 한다. 공식문서나 강의를 보고 배운 것들 말고 적용해보면서 알게된 점이나 궁금한 점들을 앞으로 TIL에 기록하려고 한다.

• 리덕스 툴킷을 설치하고 store를 생성한 다음에 전체 컴포넌트에 provider를 이용해서 store를 공급할 수 있게 컴포넌트를 </ Provider>로 감싸줘야 한다. 이때 기존에 ContextAPI는 유지한채로 리덕스를 점진적으로 마이그레이션 해야하나 고민해봤다. 아무래도 그게 좋을 것 같아서 Context의 Provider 안으로 리덕스의 Provider를 넣어보았다. 일단은 Context를 가장 바깥으로 유지해서 전역에서 변수를 전달받는 건 문제가 없도록 만들어놓고 점진적으로 리덕스를 통해 하나씩 store로 옮겨서 관리해보자.

2. What I Learned?

2.1 리덕스

리덕스를 왜 사용해야 하는가? 그냥 개발하면 안되는거야?

• 기존에 주류였던 MVC패턴, MVC 패턴은 뷰가 변경될 때 데이터를 컨트롤러를 통해 모델에 전달하고 모델은 뷰를 업데이트한다. 이 부분만 생각해보면 MVC패턴도 단방향으로만 데이터와 UI를 변경한다고 생각할 수 있지만 컨트롤러가 모델은 거치지 않고 직접 뷰를 변경할 수 있기 때문에 단방향성만 있는 것이 아니라 양방향성도 존재한다.
• 페이스북에서는 이런 MVC패턴의 양방향성으로 인한 문제로 인해 애플리케이션의 동작을 예측하기 힘들어졌기 때문에 Flux 패턴을 개발했다.
• Flux 패턴의 핵심은 단방향성이다. 그리고 Flux를 참고해서 만든 것이 Redux다.

(양방향성으로 인해 정확하게 어떤 문제가 일어났는지, 그리고 Flux를 참고해서 Redux를 만들었는데, 어떻게 참고해서 만들었는지도 정리해보자. 이 부분은 오늘 시간이 부족해서 못 알아봤으니.. 내일 이어서..)

리덕스의 핵심은?

• JavaScript 앱을 위한 예측 가능한 상태 컨테이너
• 리덕스의 3가지 원칙
  • single source of truth
    • 하나의 store로 관리되는 state
    • 모든 state는 store에 객체 트리구조로 저장된다.
  • state is read-only
    • 상태를 변화시키는 유일한 방법은 action 객체를 전달하는 방법뿐이다.
  • changes are made with pure function
    • 리덕스에서 reducer는 이전 state와 action을 받아 다음 state를 반환하는 순수함수다.
    • 여기서 핵심은 이전 state를 변경하는 대신 새로운 state 객체를 반환한다는 사실이다.

자주 사용하는 리덕스의 용어들

리덕스 공식문서에 있는 용어들을 정리해보았다.

• State

  type State = any

  • 상태는 상태트리라고도 부른다.
  • Redux API에서는 store에 의해 관리되고 getState()에 의해 반환되는 하나의 상태값을 의미한다.
• Action

  type Action = Object

  • 어떤 action이 행해질지 표시하는 type 필드를 가져야 한다.
• Reducer

  type Reducer<S, A> = (state: S, action: A) => S

  • 이전 state와 action을 이용해서 새로운 state 객체를 반환한다.
  • reducer는 같은 입력이 있으면 같은 출력을 반환하는 순수 함수다.
  • 이를 통해 핫 리로딩과 시간여행과 같은 기능들이 가능해진다.
• Dispatch

  type BaseDispatch = (a: Action) => Action
  type Dispatch = (a: Action | AsyncAction) => any

  • 디스패치 함수는 action이나 asyncAction을 받는 함수다.
  • 기본 dispatch 함수는 반드시 동기적으로 reducer에 action을 보내야 한다.
  • asyncAction을 받으려면 미들웨어로 기본 dispatch 함수를 감싸야 한다.
• ActionCreator

  type ActionCreator<A, P extends any[] = any[]> = (...args: P) => Action | AsyncAction

  • actionCreator는 단지 액션을 만드는 함수다.
  • actionCreator는 action을 호출만 할 뿐 dispatch하지 않는다.
• AsyncAction

  type AsyncAction = any

  • 기본적으로 리덕스는 순수 함수인 reducer를 활용하기 때문에 동기적인 처리만 가능하다.
  • asyncAction은 기본 dispatch 함수로 전달되기 전에 미들웨어를 통해 action으로 바뀌어야 한다.
• Middleware

  type MiddlewareAPI = { dispatch: Dispatch, getState: () => State }
  type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch

  • middleware는 dispatch 함수를 결합해서 새 dispatch 함수를 반환하는 고차함수입니다.
  • asyncAction을 action으로 전환한다.
• Store

  type Store = {
    dispatch: Dispatch,
    getState: () => State,
    subscribe: (listener: () => void) => () => void,
    replaceReducer: (reducer: Reducer) => void
  }

  Redux 앱에는 단 하나의 저장소만 있어야 한다.
  • dispatch(action) : 기본 Dispatch 함수
  • getState() : store의 현재 상태 반환
  • subscribe(listener) : 상태가 바뀔 때 호출될 함수를 등록
  • replaceReducer(nextReducer) : 핫 리로딩과 코드 분할을 구현할 때 사용
• StoreCreator

  type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store

  • storeCreator는 store를 만드는 함수다.
• StoreEnhancer

  type StoreEnhancer = (next: StoreCreator) => StoreCreator

  • storeEnhancer는 storeCreator를 결합하여 강화된 새 storeCreator를 반환하는 고차함수다.

2.2 면접대비

var, let, const의 차이점에 대해 설명해주세요.

• var, let의 변수 선언 키워드, const는 상수 선언 키워드
• var는 함수 스코프, let,const는 블록스코프
• var, let, const 모두 호이스팅된다. 하지만 var는 선언과 초기화가 동시에 이루어지기 때문에 실제로 undefined가 초기화 되면서 미리 참조가 가능하고 let, const는 TDZ 때문에 선언과 초기화가 분리되어 진행되기 때문에 초기화되지 않고 참조했다는 Reference Error가 발생한다. 하지만 실제 따라서 호이스팅이 되지 않는 것처럼 보일 뿐이지 실제로는 선언자체는 호이스팅 된다.
• 자바스크립트는 평가와 실행 단계로 나눌 수 있는데, 평가 단계에서 렉시컬 환경에 모든 변수와 함수를 등록한다. 이 과정이 호이스팅이다. 그리고 실행 단계에서 실제 할당이 이루어진다. (좀 애매하게 이해하고 있는 것 같다… 추가로 더 알아보고 다시 정리하자.)

3. What I curious?

TIW_2023_07_28