[Typescript] React에 Typescript 사용하는 법
React 프로젝트 생성
타입스크립트의 셋팅이 완료된 새로운 프로젝트를 생성하는 법이다
npx create-react-app 프로젝트명 --template typescript
만약 기존 프로젝트에 타입스크립트만 추가하고 싶다면 다음과 같이 터미널에 입력한다
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
Typescript로 만든 React 프로젝트
일반 프로젝트와 다른 점은 컴포넌트 파일에 js 가 아닌 tsx 확장자를 사용해야한다는 것이다.
그러면 리액트 프로젝트에서 typescript 문법을 어디에 응용할 수 있을지 알아보자
JSX 타입지정
리액트에서는 변수나 자료에 <div> 를 담아서 쓸 수 있다.
리액트에서 <div> 를 사용하면 html 이 아닌 JSX 라는 자료가 된다.
let 박스 :JSX.Element = <div></div>
let 버튼 :JSX.Element = <button></button>그래서 이런 타입을 지정하고 싶으면 JSX.Element 라는 타입을 쓰자
component 타입 지정
함수형 컴포넌트의 타입지정은 파라미터와 return 부분을 타입지정한다.
여기서 파라미터는 props를 말한다.
type AppProps = {
name: string;
};
function App (props: AppProps) :JSX.Element {
return (
<div>{message}</div>
)
}
위 코드에서는 AppProps 라는 객체 형태의 타입을 지정한다.
name 이라는 string 속성을 포함한다.
그리고 반환 타입으로는 <div>를 반환하기 때문에 JSX.Element 를 반환 타입으로 지정해주었다.
(하지만 컴포넌트는 JSX를 return 하기 때문에 생략해도 자동으로 타입지정이 된다.)
JSX 를 props로 하기
만약 props로 JSX를 입력하고 싶다면 다음과 같이 작성한다.
JSX.IntrinsicElements 라는 이름의 타입을 사용하는 방법이다.
type ContainerProps = {
a: JSX.IntrinsicElements['h4'];
};
function Container (props: ContainerProps) {
return (
<div>{props.a}</div>
)
}a 라는 props에는 <h4>만 넣을 수 있도록 하는 방법이다.
state 문법에 타입지정
const [user, setUser] = useState<string | null>('kim');
state 를 만들 때 자동으로 타입이 할당되긴 하지만,
만약 state 타입이 나중에 변할 수 있거나 여러 타입을 지정해놓고 싶다면 < > 안에 타입을 설정해주면 된다.(Generic 문법이용)
Type assertion 문법 사용
assertion 을 하고 싶으면 as 나 < > 를 사용하면 된다
하지만 리액트에서는 < > 를 쓰면 컴포넌트로 오해할 수 있으니 as 키워드만 쓰자
let code: any = 123;
let employeeCode = <number> code; // NO!
결국 타입스크립트를 쓴다고 리액트 개발방식이 크게 달라지는 것이 아니라
변수 정의 부분의 타입지정을 할 수 있다는 것과 같은 차이점이 있을 뿐이다.
전통방식의 redux + typescript
redux 를 쓰는 이유는 다음과 같았다
1. state를 한 곳에서 관리 가능 -> 컴포넌트들이 props 없이 state 다루기 쉬움
2. 수정방법을 reducer 함수로 정의해놔서 state 수정할 때 발생하는 버그를 줄일 수 있음
여기에서 말하는 전통방식이라는 건 redux 공식 toolkit 라이브러리 안쓰고 if문 switch문 등을 쓰는 방식을 말한다.
npm install redux react-redux
redux 설치는 위처럼 한다.
import { Provider } from 'react-redux';
import { createStore } from 'redux';
interface Counter {
count : number
}
const 초기값 :Counter = { count: 0 };
function reducer(state = 초기값, action :{type : string}) {
if (action.type === '증가') {
return { count : state.count + 1 }
} else if (action.type === '감소'){
return { count : state.count - 1 }
} else {
return initialState
}
}
const store = createStore(reducer);
// store의 타입 미리 export 해두기
export type RootState = ReturnType<typeof store.getState>
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
)
위 코드는 index.ts 의 코드이다.
button 을 누르면 state가 +1, -1 되는 간단한 예제이다.
redux 를 쓸 때는 state 초기값과 reducer 함수의 타입지정을 잘해두자.
일단 초기값 변수 오른쪽에 타입지정을 잘해주고, reducer 함수는 state, action 파라미터 2개 타입지정을 한다.
state 는 초기값을 넣으면 타입지정이 잘돼서 필요없긴하다.
reducer 함수의 return 타입도 타입지정을 할 수 있다.
state 를 꺼낼 때를 살펴보자
아래는 App.tsx 이다
import React from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { Dispatch } from 'redux'
import {RootState} from './index'
function App() {
const 꺼내온거 = useSelector( (state :RootState) => state );
const dispatch :Dispatch = useDispatch();
return (
<div className="App">
{ 꺼내온거.count }
<button onClick={()=>{dispatch({type : '증가'})}}>버튼</button>
<Profile name="kim"></Profile>
</div>
);
}
redux 에 있는 state 를 가져오려면 useSelector 훅을 써서 간단하게 가져올 수 있다.
state 를 변경할 때에는 useDispatch 를 사용한다.
- 타입지정하는 법
1. useSelector() 안에 파라미터에 하기
index.ts에서 타입을 export 해서 사용할 수도 있다.
index.ts에 있던 export type RootState = ReturnType<typeof store.getState> 코드가 store 타입을 미리 export 해두는 방법이다.
2. useDispatch 타입지정하기
import {Dispatch} from 'redux' 로 타입을 가져와서
const dispatch :Dispatch 처럼 쓰면 된다.
신식 redux + typescript
요즘은 redux, react-redux 이외에 redux tookkit을 추가로 설치해서 많이들 사용한다고 한다.
이걸 쓰면 더 코드를 깔끔하게 짤 수 있기 때문
npm install @reduxjs/toolkit
아래는 index.ts 이다
// index.tsx
import { createSlice, configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
const 초기값 = { count: 0, user : 'kim' };
const counterSlice = createSlice({
name: 'counter',
initialState : 초기값,
reducers: {
increment (state){
state.count += 1
},
decrement (state){
state.count -= 1
},
incrementByAmount (state, action :any){
state.count += action.payload
}
}
})
let store = configureStore({
reducer: {
counter1 : counterSlice.reducer
}
})
//state 타입을 export 해두는건데 나중에 쓸 데가 있음
export type RootState = ReturnType<typeof store.getState>
//수정방법 만든거 export
export let {increment, decrement, incrementByAmount} = counterSlice.actions
// React 애플리케이션 루트에 Provider 추가
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
위 코드에 대한 설명은 다음과 같다.
createSlice()로 slice 를 만들어준다. slice 는 state와 reducer 를 합쳐놓은 것이라고 생각하면 편하다.
slice 안에는 slice의 이름, state의 초기값, reducer 가 정확하게 들어가 있어야한다.(작명 X)
state 는 원하는대로 만들고, reducer 는 함수 형태로 만든다. 첫 파라미터에는 state, 두번째 파라미터에는 actions 가 자동 부여된다.
다 만들었다면 configureStore에 넣고 등록한다.
내가 만든 reducer 를 쓰고 싶으면 reducer 안의 함수명을 export 한다.
타입지정하기
1. state 초기값 타입지정
2. reducer 안의 action 파라미터 타입지정
3. 나머지는 타입지정 자동
action 타입지정 방법
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
(상단 생략)
incrementByAmount (state, action: PayloadAction<number>){
state.value += action.payload
},action 타입지정은 위처럼 하라고 권장한다고 한다.
payload란 dispatch할 때 보내는 데이터를 의미하는데,
그 자료의 타입을 < > 안에 넣어서 타입지정하는 것이다.
지금은 payload의 타입이 number 여서 < > 안에 number 라고 작성해줬다.
신식 redux, state 를 꺼낼 때
import { useDispatch, useSelector } from 'react-redux'
import {RootState, increment} from './index'
function App() {
const 꺼내온거 = useSelector( (state :RootState) => state);
const dispatch = useDispatch();
return (
<div className="App">
{꺼내온거.counter1.count}
<button onClick={()=>{dispatch(increment())}}>버튼</button>
</div>
);
}useSelector() 를 사용하면 state 를 쉽게 꺼낼 수 있다.
꺼내고 사용하는 방법은, ()->{} 와 같은 콜백함수를 작성해주는 것이다.
이 함수의 첫 파라미터는 항상 state 가 된다.
useDispatch () 를 쓰면 쉽게 수정요청을 날릴 수 있다.
타입지정은 state 와 dispatch에 하면 된다.
1. useSelector() 안의 파라미터에 타입지정
state 를 파악하고 타입을 지정해주거나, 타입을 index.ts 와 같이 reducer 을 만든 곳에서 미리 RootState 라는 타입을 export 해두면 import 해서 쉽게 타입지정이 가능하다.
2. useDispatch() 사용할 때 타입지정
공식문서에서는 index.ts에서 export type AppDispatch = typeof store.dispatch 를 하고
App.tsx에서 import 해와서 useDispatch<AppDispatch>() 이렇게 타입지정하라고 되어있긴하다.
역시 Redux 보면.. Recoil이나 Zustand가 쉽고 편한건 짱인 것 같다.
ref: 코딩애플