[항해99] React 숙련 주차 기본 개념

벌써 입문 숙련 주차까지 끝이 났다.

이번 주엔 리덕스를 사용하는 방식에 대해서 배웠고, 간단하게나마 리덕스의 흐름을 이해할 수 있었다.

🔐 리덕스에 저장된 데이터가 변경되었을 때 흐름

어떤 과정을 거쳐 리덕스 스토어를 구독중인 컴포넌트가 변경된 값을 가져오는걸까?

1. UI (view): 사용자가 사용할 수 있는 화면

   • 사용자와 상호작용이 가능하며, 사용자의 행동에 따라 새로운 명령어가 store에 전달된다.

2. Action: UI 쪽에서 변경될 수 있는 설정된 명령어

   • event와 비슷한 뉘앙스로 생각하면 편할듯
   • Reducer가 관리하는 state에 변화를 일으킨다.

3. Dispatcher: Reducer로 액션을 보내는 일종의 캐리어

   • component(UI)에서 일어나는 액션은 Dispatch를 통해 스토어에 전달된다.

4. Reducer: 변화를 일으키는 함수

   • Dispatcher를 통해 액션(명령)을 받는다.
   • 기존 state에 있던 값을 사용해서 액션에 맞게 상태를 변경시킨다. (이때 기존 값은 덮어씌워진다.)

5. Store: 전역 상태 관리 창고

   • 현재 애플리케이션의 상태인 state와 해당 state를 변경 시킬 수 있는 함수인 Reducer를 갖고있다.

6. State: 관리되고 있는 상태값

   • Reducer로 인해 지속적으로 변경된다.
   • 사용자의 행동으로 인해 새로운 액션(명령)이 Reducer에게 전달되면, 명령을 실행하는 reducer로 인해 값이 변경된다.
   • 변경되는 값이 생기면 렌더링이 일어나고, UI측에는 변경된 상태가 표시된다.

🔐 옵셔널 체이닝

• Optional Chaining은 ES2020에서 등장한 새로운 연산자로서 '?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다.
• 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다. 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.

🔐 < form >사용 시 < button type="submit" >과 함께 사용하면 리덕스 데이터가 초기화 되는 이유

• <form>내부의<button>은 클릭 시, submit 이벤트가 발생된다.

• 데이터를 submit하기 위해 페이지를 reload 하고 페이지가 reload되면 리덕스 store의 state가 초기화된다.

🔐 새로고침 시에도 리덕스 내의 데이터를 유지하는 법

• 리덕스 내의 데이터를 유지하기 위해서는 데이터를 저장하고 읽어오는 방법을 사용하면 된다.

• 데이터베이스에 데이터를 저장하는 방법이 대표적이지만 데이터베이스를 사용할 수 없는 경우에는 간단하게 로컬스토리지를 이용하는 방법을 사용할 수 있다.

• 리덕스에서 로컬 스토리지를 이용하는 방법은 대표적으로 두가지가 있다. redux-persist라는 라이브러리를 사용하는 방법과 store.subscribe()함수를 이용하는 방법이 있다.

1. redux-persist

   import { persistStore } from "redux-persist";
   import { PersistGate } from "redux-persist/integration/react";
   
   ...
   
   const persistor = persistStore(store);
   
   const Root = () => (
     <Provider store={store}>
       <PersistGate loading={null} persistor={persistor}>
         <App />
       </PersistGate>
     </Provider>
   );
   
   ReactDOM.render(<Root />, document.getElementById("root"));

2. store.subscribe()

   const persistedState = localStorage.getItem('key')
     ? JSON.parse(localStorage.getItem('key'))
     : [];
   
   const store = createStore(rootReducer, persistedState); 
   
   store.subscribe(() => {
     localStorage.setItem('key', JSON.stringify(store.getState()))
   })

• subscribe함수는 dispatch가 실행될 때 내부 콜백 함수가 실행된다.
  
• 이를 이용해서 redux의 store 상태와 localStorage의 상태를 동기화시킬 수 있다.