[TS]React with TS

React with TS

import React, { useState } from 'react';
import './App.css';
// ### JSX 타입지정
let 박스: JSX.Element = <div></div>;

// ### 함수 컴포넌트 타입지정.
// html 리턴
function Profile({ name }: { name: string }): JSX.Element {
  return <div>프로필</div>;
}

// ###  컴포넌트 prop 타입 지정
interface Student {
  name: string;
  age: number;
}

function Profile2(props: Student): JSX.Element {
  return <div>프로필</div>;
}

// ### useState 타입지정
// 자동으로 타입지정 해줌. but 지정해주고 싶다? 제네릭.
function App() {
  let [user, setUser] = useState<string | number>('kim');

  return (
    <div>
      <h4>안녕</h4>
      <Profile name="영구" />
      <Profile2 name="철수" age={10} />
    </div>
  );
}

export default App;

// ### assertion 
// - 리액트는 홀화살괄호 사용하면 안됨
// - as 키워드를 쓰되 100% 확실할 때만 사용.
let code: any = 123;
let employeeCode = <number> code;

참고 - assertion에 대해서.

Redux with TS

redux 사용이유

1. state를 한 곳에서 관리하여 관리 용이
2. state 수정 시 발생 버그 감소

설치방법

npm install redux react-redux

리덕스 세팅방법

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { createStore } from 'redux';

interface Counter {
  count: number;
}

const 초기값: Counter = { count: 0 };
// 모든 컴포넌트가 공유할 state

function reducer(state = 초기값, action: { type: string }) {
  // reducer : 미리 정의한 state 수정 방법.
  // action은 컴포넌트에서 dispatch()날리면 거기 넣는 파라미터와 같다.
  if (action.type === '증가') {
    return { count: state.count + 1 };
  } else if (action.type === '감소') {
    return { count: state.count - 1 };
  } else {
    return 초기값;
  }
}

const store = createStore(reducer);

// store의 타입 미리 export 해두기
export type RootState = ReturnType<typeof store.getState>;

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

컴포넌트에서 사용하기

import React from 'react';
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from './index';
import { Dispatch } from 'redux';

function App() {
  const 가져온값 = useSelector((state: RootState) => state);
  // state의 타입 지정 일일히 하기 힘들다.
  // store에 export type RootState = ReturnType<typeof store.getState>;
  // 공식문서에서 하란대로 위와 같은 타입을 지정해두고 가져와서 쓰면 된다.
  const dispatch: Dispatch = useDispatch();
  return (
    <div className="App">
      {가져온값.count}
      <button
        onClick={() => {
          dispatch({ type: '증가' });
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

(신식)Redux-toolkit 사용

설치방법

npm install @reduxjs/toolkit react-redux

• 이미 리액트 리덕스 설치했으면 툴킷만 설치!

기존 redux와 차이?

• state, reducer를 객체로 관리.

장점

1. reducer 프로퍼티가 함수라 가독성 굳
2. state 수정 시 사본을 만들 필요 없음.

사용해보기

RTK 세팅

// index.tsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { createSlice, configureStore, PayloadAction } from '@reduxjs/toolkit';

const 초기값: { count: number; user: string } = { count: 0, user: 'kim' };

//slice -> state와 reducer의 합본
const counterSlice = createSlice({
  name: 'counter',
  initialState: 초기값,
  reducers: {
    increment(state) {
      //state는 초기값에 지정된 타입에 의해 타입지정 됨.
      state.count += 1;
    },
    decrement(state) {
      state.count -= 1;
    },
    incrementByAmount(state, action: PayloadAction<number>) {
      //기존 redux에서는 action에 Dispatch 타입 지정
      // 툴킷은 PayloadAction 지정.
      state.count += action.payload;
    },
  },
});

let store = configureStore({
  reducer: {
    counter1: counterSlice.reducer,
  },
});

// store의 타입 미리 export 해두기
export type RootState = ReturnType<typeof store.getState>;

//수정방법 만든거 export
export let { increment, decrement, incrementByAmount } = counterSlice.actions;

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

컴포넌트에서 사용

//App.tsx
// ### 컴포넌트에서 redux 사용방법

import React from 'react';
import './App.css';
import { useDispatch, useSelector } from 'react-redux';
import { increment, RootState } from './index';
import { Dispatch } from 'redux';

function App() {
  const 가져온값 = useSelector((state: RootState) => state);
  // state의 타입 지정 일일히 하기 힘들다.
  // store에 export type RootState = ReturnType<typeof store.getState>;
  // 공식문서에서 하란대로 위와 같은 타입을 지정해두고 가져와서 쓰면 된다.
  const dispatch: Dispatch = useDispatch();
  // dispatch 타입 지정 : 위 코드는 예전 방식
  // 공식문서 방식.
  // index.ts에 export type AppDispatch = typeof store.dispatch
  // App.ts 에 import 하고, useDispatch<AppDispatch>()
  return (
    <div className="App">
      <div>{가져온값.counter1.count}</div>
      <button
        onClick={() => {
          dispatch(increment());
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;