<table>
   <colgroup>
     <col style={{ width: '15%' }} />
     <col style={{ width: '45%' }} />
     <col style={{ width: '40%' }} />
   </colgroup>            
   <thead>
     <tr>
       <th colSpan={3}>우리집 소식</th>
     </tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td>101동 104호</td>
       <td>2021-03-28</td>
     </tr>
   </tbody>
 </table>

//src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

//src/store
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import countSlice from 'src/store/counter/counterSlice';
const store = configureStore({
  reducer: { counter: countSlice },
});

export default store;

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

// Use throughout your app instead of plain `useDispatch` and `useSelector`
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

//src/store/counter/counterSlice
import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { RootState, useAppSelector, useAppDispatch } from 'src/store';

interface CounterState {
  value: number;
}

// Define the initial state using that type
const initialState: CounterState = {
  value: 0,
};

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => {
      state.value = state.value + 1;
    },
    decrement: (state) => {
      state.value = state.value - 1;
    },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value = state.value + action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;

export function HooksCounter() {
  const count = useAppSelector((state: RootState) => state.counter.value);
  const dispatch = useAppDispatch();

  return {
    count,
    dispatch,
  };
}

export default counterSlice.reducer;

//src/components/Counter/CounterComponent
import React from 'react';
import { decrement, increment, HooksCounter } from 'src/store/counter/counterSlice';
export default function CounterComponent() {
  const { count, dispatch } = HooksCounter();
  return (
    <div>
      <button aria-label="Increment value" onClick={() => dispatch(increment())}>
        Increment
      </button>
      <span>{count}</span>
      <button aria-label="Decrement value" onClick={() => dispatch(decrement())}>
        Decrement
      </button>
    </div>
  );
}

맨날 redux랑 redux-saga를 접합하여 쓰다가 container와 component 및 module,saga 구조로 코드를 짜다보니 코드를 쓸 양이 방대해지기도 하고 이제 질리기도 하여 .. 핫하다는 redux-toolkit을 사용해보기로 함!

우선 react를 띄웠다고 가정하고 시작!

redux-toolkit 설치 명령어

#npm
npm install @reduxjs/toolkit

#yarn
yarn add @reduxjs/toolkit

redux-toolkit이 가지고 있는 api

import {configureStore, createReducer, createAction, createSlice, createAsyncThunk, createEntityAdapter, createSelector} from "@reduxjs/toolkit"

1. configureStore :  슬라이스 리듀서를 자동으로 결합하고 제공하는 Redux 미들웨어를 추가하고, 기본적으로 redux-thunk를 포함하며 Redux DevTools Extension을 사용할 수 있게 해줌 ( configureStore 자체가 내장이 되어있다니! )
2. createReducer : switch문 없이 알아서 action과 reducer를 감지해준다. (immer자체가 내장이 되어있다!! 와우)
3. createAction : action type을 받아서 action을 발생시킨다.
4. createSlice : reducer, initialState, slice이름을 하나로 묶어서 사용가능하게 함 (리듀서 함수 세트 메뉴라고 생각하면 된다)
5. createAsyncThunk : 비동기 담당하고 있다! action type을 받아서  => promise값을 내보내고 "pending / fulfilled / rejected"를 dispatch하는 thunk를 만들어준다 
6. createEntityAdapter : store에 들어있는 data를 관리하기 위한 재사용이 가능한 reducer와 selector를 만들어준다
7. createSelector :  state값들을 사용하기 쉽게 내보내주는 역할 (영문설명: re-exported for ease of use)

redux를 사용시, 유의할 점은 앱에 하나 이외의 스토어를 만들면 안된다는 것이다. 그렇기에 코드의 유지보수를 위해서 단위별로 reducer를 분기하여 사용하게 되는게 일반적인데 => 이때, 여러개의 reducer들을 단!!! 하나의 reducer(예시에서는 이게 rootReducer에 해당)로 묶어서(통합된 하나의 스토어를 만들기 위함) 사용하기 위해 combineReducers가 필요하다

예시) 
import { combineReducers } from 'redux';
import loadingReducer from './loadingReducer'; // 로딩 체크하기 위한 reducer
import errorReducer from './errorReducer'; // 에러를 체크하기 위한 reducer

const rootReducer = combineReducers({
  isLoading: loadingReducer,
  error: errorReducer,
});

export default rootReducer;

2. createStore

앱 내에, 단 하나만 존재해야하는 => 앱의 상태 트리 전체를 보관하는 Redux 스토어를 만들때 쓰인다.

예시)
import { createStore } from 'redux'
import rootReducer from '../reducers'; // 어디에선가 가져오는 rootReducer

const configureStore = () => {
  const store = createStore(
    rootReducer,
  );
  return store;
}

3. applyMiddleware

applyMiddleware의 존재 이유는 redux에서 비동기를 편리하게 처리하기 위해 미들웨어를 생성하기 위해 필요한 api이다. (미들웨어는 정말 강력하다. 너무 편함...)

예시)
import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from '../reducers';
import rootSaga from '../saga';

const sagaMiddleware = createSagaMiddleware();

const configureStore = () => {
  const store = createStore(
    rootReducer,
    applyMiddleware(sagaMiddleware),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

4. compose

redux-saga사용을 위한 middleware를 만들때, 필요!

공식문서를 보면 compose에 대한 정의를 => 함수를 오른쪽에서 왼쪽으로 조합합니다. 이것은 함수형 프로그래밍 유틸리티로, Redux에는 편리함을 위해 포함되었습니다. 여러 스토어 함수(enhancer)들을 순차적으로 적용하기 위해 사용할 수 있습니다 라고 해놓았다.

이게 무슨 의미인지는 아래 compose의 사용법으로 알 수 있다.

예시)
import { compose } from 'redux';
(args): 인자를 받은 함수의 return 값은 왼쪽에 있는 함수의 인수로 제공되는 식으로 연속된다. 
compose(f, g, h) = (...args) => f(g(h(...args)))


import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';

const sagaMiddleware = createSagaMiddleware(); 
const configureStore = () => {
  const store = createStore(
    rootReducer,
    compose(
      applyMiddleware(sagaMiddleware),
      window.__REDUX_DEVTOOLS_EXTENSION__ &&
        window.__REDUX_DEVTOOLS_EXTENSION__(),
    ),
  );

  sagaMiddleware.run(rootSaga);

  return store;
}

해당 내용에 대한 자세한 탐구는 역시 공식문서이다.

(https://lunit.gitbook.io/redux-in-korean/api)해당 api 더 알아보러가기

eslint(airbnb 스타일) 와 prettier 동시 사용을 위한 패키지 설치를 위해, CRA의 터미널 창에 하단의 명령어를 입력한다.

yarn add -D eslint prettier
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser
yarn add -D eslint-config-airbnb
yarn add -D eslint-config-prettier eslint-plugin-prettier

ESlint 설정

src와 같은 최상위 경로에 .eslintrc 파일 생성

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  " extends": [
    "airbnb",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:prettier/recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint"
  ],
  "rules": {
    "linebreak-style": 0,
    "import/prefer-default-export": 0,
    "prettier/prettier": 0,
    "import/extensions": 0,
    "no-use-before-define": 0,
    "import/no-unresolved": 0,
    "import/no-extraneous-dependencies": 0, // 테스트 또는 개발환경을 구성하는 파일에서는 devDependency 사용을 허용
    "no-shadow": 0,
    "react/prop-types": 0,
    "react/jsx-filename-extension": [
      2,
      { "extensions": [".js", ".jsx", ".ts", ".tsx"] }
    ],
    "jsx-a11y/no-noninteractive-element-interactions": 0
  }
}

Prettier 설정

src와 같은 최상위 경로에 .prettierrc 파일 생성

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "arrowParens": "always"
}

settings 설정

, + command키를 누르면 setting창이 나온다

setting창의 내부 검색창에 formatter를 검색 후,

1. Editor: Default Formatter에 esbenp.prettier-vscode 를 설정
2. Editor: Format On Save 란에 체크!

터미널을 이용한 설치

npx create-react-app 프로젝트(이름) --template typescript yarn create react-app 프로젝트(이름) --template typescript