[새싹x코딩온] 웹 개발자 부트캠프 과정 15주차 회고 | React에서 Typescript 적용하기

1. 들어가며

• React 에 Typescript 적용하여 프로젝트 만들기

2. Typescript

타입스크립트의 개념이나 적용법에 대해서는 전에 포스팅한것이 있어서 여기서는 리액트 프로젝트에

어떻게 타입스크립트를 적용시킬 것인지에 대한 것을 포스팅할 예정이다.

 

우선 타입스크립트를 적용한 리액트 프로젝트를 만드려면 아래 커맨드를 이용해서

프로젝트를 만들어주면 된다.

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

 

기존 프로젝트에 적용하고 싶다면 아래의 커맨드로 타입스크립트 패키지를 설치하고

npm i typescript @types/node @types/react @types/react-dom @types/jest

js나 jsx 파일을 ts나 tsx 파일로 변경한다.

 

 

리액트 프로젝트에 타입스크립트 적용하기

기존에 https://daddda3232.tistory.com/76 이 포스팅에서 useReducer를 연습했던 코드를 

타입스크립트를 활용하는 방법으로 리팩토링 하고자 한다.

 

App.tsx

여기서 자식 컴포넌트에 props로 데이터를 넘겨준다.

넘겨준 데이터의 props는 타입을 지정해줘야한다.

이벤트 객체의 타입도 지정해줘야 하는데, 여기서는 클릭이벤트를 썼기 때문에 React.MouseEvent<HTMLElement>로 타입을 지정했다. 

useReducer를 사용했기 때문에 reducer 함수에서 매개변수로 받는 state와 action의 타입도 지정해야한다. 

아래의 코드에서는 action을 number 로 받았지만 dispatch로 넘겨주는 값에 따른 타입을 지정해야 한다. 

 

 

 

import React, { useReducer } from 'react';
import './styles/Villagers.scss'
import villagers from './data/villagersData'
import { villagersType } from './types/types';
import { Villagers, VillagerInfo } from "./components/Villagers";

const initState : villagersType = villagers[0]

const reducer = (prevState : villagersType, action : number) => {
  return prevState = villagers[action - 1]
}

function App() {
  const [villager, dispatch] = useReducer(reducer, initState)  

  const clickVillger = (e:React.MouseEvent<HTMLElement>) => {
    let vId : number = Number(e.currentTarget.getAttribute('data-list'))
    
    dispatch(vId)
  }
  return (
    <div className="App">
      <Villagers villager={villagers} click={clickVillger}/>
      <VillagerInfo name={villager.name} day={villager.birthday}/>
    </div>
  );
}

export default App;

 

villagers.tsx

App.tsx에서 언급했다시피 props로 데이터를 상위컴포넌트에게 받을 때는 props 가 어떤 형태로 넘어오는지

타입을 미리 적어둬야 한다. 인터페이스 키워드로 객체의 타입을 지정해서 props의 타입을 지정한다. 

이때 정의된 props면 반드시 넘겨줘야 한다. 넘겨주고 싶지 않은 props가 있으면 ? 키워드를 사용한다. 

 

import React from 'react'
import { villagersType } from '../types/types'

interface villagerProps {
    villager : villagersType[];
    click(e : React.MouseEvent<HTMLElement>) : void;
}

interface infoProps {
    name : string;
    day : string;
}

export const Villagers = ({villager, click} : villagerProps) => {
  return (
    <ul className='villager-list'>
        {
            villager.map((v,i)=>
                <li key={i} onClick={click} data-list={v.id} className={`villager villager${v.id}`}>
                    <figure className='villager-img'>
                        <img src={'./image/acnh/'+v.name+'1.png'} alt={v.name}/>
                    </figure>
                    <p className='villager-name' data-day={v.birthday}>{v.name}</p>
                </li>
            )
        }
    </ul>
  )
}

export const VillagerInfo = ({name, day} : infoProps) => {
    return(
        <div className='villager-info'>
            <h2 className='villager-name'>{name}</h2>
            <figure className='villager-img'>
                <img src={'./image/acnh/'+name+'2.png'} alt={name}/>
            </figure>
            <p className='villager-birthday' >{day}</p>
        </div>
    )
}

 

결과

 

 

3. 마치며

간단한 리액트 프로젝트에 타입스크립트를 적용해봤다.

이론을 듣는 것은 쉬웠는데, 막상 프로젝트에 적용하려니 헷갈린다.

좀 더 사용해서 익숙해지도록 노력해야겠다. 그래도 뭔가 쓰면서 왜 타입스크립트가 중요한지에 대해 깨닫는 것 같다.

확실히 타입을 지정하니, 사소한 오류가 잡히는 것 같은 느낌이다.

익숙해져서 redux 사용한 프로젝트에도 적용해봐야겠다.

 

4. Reference

1. 코딩온 강의 교안 및 실습

 

2. https://tesseractjh.tistory.com/274

[React/TS] 이벤트 핸들러 함수의 타입

3. https://velog.io/@recordboy/%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8TypeScript-%ED%83%80%EC%9E%85-%EC%84%A0%EC%96%B8

타입스크립트(TypeScript) 타입 선언

 

4. https://velog.io/@ryuyh2000/useReducer-TypeScript-%EC%A0%95%EB%A6%AC

useReducer (TypeScript) 정리