JavaScript에서 TypeScript로: 3가지 방법으로 타입스크립트 도입하기

 

시작에 앞서...

React와 TypeScript의 결합은 현대 웹 개발에서 점점 더 인기 있는 조합입니다.

TypeScript는 JavaScript에 정적 타입 검사를 추가하여 코드의 안정성과 유지 보수성을 높이는 데 도움을 주며,

React는 사용자 인터페이스를 효율적으로 구축할 수 있게 해줍니다.

 

그러나 기존의 JavaScript(jsx) 프로젝트를 TypeScript(tsx)로 전환하는 과정에서 고민이 생길 수 있습니다.

특히, 기존의 컴포넌트에 타입을 추가하거나, 타입스크립트의 이점을 활용하기 위해 어떤 접근 방법을 선택해야 할지에 대한 고민이 클 것입니다.

 

이 글에서는 기존의 JSX 파일을 TypeScript(TSX)로 변환하는 세 가지 방법을 소개할 예정입니다.

각 방법은 프로젝트의 규모나 상황에 따라 다르게 적용될 수 있으며, 그에 따라 얻을 수 있는 장점도 다를 것 입니다.

TypeScript로의 전환이 막막하게 느껴질 수 있지만, 이 글이 가이드가 되어 쉽게 시작해볼 수 있기를 기대하며 포스팅을 진행해보겠습니다!

 

---

[방법1] .tsx 파일로 변환

• Typescript도 JSX를 지원합니다. https://www.typescriptlang.org/ko/docs/handbook/jsx.html

Documentation - JSX

• 기존 .jsx파일의 확장자를 .tsx로 변경하면 됩니다.
• 정적 타입 검사가 가능해집니다.

1. 기존 .jsx 프로젝트를 건들고 싶지 않다면, ts프로젝트를 따로 생성해줍니다. 

   저는 `npm create vite` 명령어를 통해 TS 파일 프로젝트를 생성해주었습니다.

 

1-1. 기존 jsx,css파일 복사하여 붙여넣기합니다.

 

2. jsx→tsx 로 확장자를 변경해줍니다.

파일 이름 변경하기로로 가능합니다.

 

3. 타입검사 적용할 파일에 타입을 지정해줍니다.

 예시를 들자면, 저는 Input.tsx(타입검사 적용할 파일)에서 타입정의를 통해  prop의 setList 타입을 지정해주었습니다.

[전]  Input.jsx 코드

export default function Input({ setList }) { // 타입 지정 적용 X
  const [inputValue, setInputValue] = useState("");

	  const handleAddClick = () => {// 여행지 추가
    setList((prevList) => [...prevList, inputValue]); // 이전 배열을 받아 새로운 배열 반환
    setInputValue(""); // 입력칸 초기화
  };

  return (
    <div className="inputCon mw">
      <input
        type="text"
        placeholder="가고싶은 여행지를 등록하세요"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddClick}>추가</button>
      {/* <i className="fa-light fa-circle-plus"></i> */}
    </div>
  );
}

[후] Input.tsx 코드 

type InputProps = {
  setList: React.Dispatch<React.SetStateAction<string[]>>;
};

export default function Input({ setList }: InputProps) {
  const [inputValue, setInputValue] = useState("");

	  const handleAddClick = () => {// 여행지 추가
    setList((prevList) => [...prevList, inputValue]); // 이전 배열을 받아 새로운 배열 반환
    setInputValue(""); // 입력칸 초기화
  };

  return (
    <div className="inputCon mw">
      <input
        type="text"
        placeholder="가고싶은 여행지를 등록하세요"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddClick}>추가</button>
      {/* <i className="fa-light fa-circle-plus"></i> */}
    </div>
  );
}

 

[방법2] 기존 프로젝트 파일 + JSDoc 활용

• 전체 or 특정 .jsx 파일에만 타입검사 적용 가능하다는 장점이 있습니다.
• 정적 타입 검사가 적용됩니다.

1. tsconfig.json 설정

생성한 tsconfig.json 파일에 다음과 같이 설정을 추가합니다.

{
  "compilerOptions": {
    "allowJs": true,
    "checkJs": true,
    "jsx": "react-jsx", // JSX 사용
    "strict": true
  },
  // "include": ["src/**/*"], // 모든 파일에 타입검사 적용
  "files": ["src/InputField/Input.jsx"] // 특정 파일(Input.jsx)에 타입검사 적용
}

 

2. JSDoc 주석 추가

• 주석으로 컴포넌트 함수 인자(params), 반환값(returns)의 타입을 지정해줍니다.
• 복잡한 타입은 JSDoc으로 정의하기 어려울 듯 싶습니다. ㅠㅜ(.jsx에서 인터페이스 사용 불가하니까요..)

import "./Input.css";
import { useState } from "react";

/**
 * @typedef {Object} InputProps
 * @property {React.Dispatch<React.SetStateAction<string[]>>} setList - 리스트를 업데이트하는 함수
 */

/**
 * Input 컴포넌트
 * @param {InputProps} props - 컴포넌트의 props
 * @returns {JSX.Element} JSX 요소를 반환
 */
export default function Input({ setList }) {
  const [inputValue, setInputValue] = useState("");

  const handleAddClick = () => {
    setList((prevList) => [...prevList, inputValue]); // 이전 배열을 받아 새로운 배열 반환
    setInputValue(""); // 입력칸 초기화
  };

  return (
    <div className="inputCon mw">
      <input
        type="text"
        placeholder="가고싶은 여행지를 등록하세요"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <button onClick={handleAddClick}>추가</button>
    </div>
  );
}

 

[방법3] PropTypes 라이브러리 사용

• 런타임에서 타입 검증 추가하는 방법입니다.

1. prop-types 패키지를 설치

`npm install prop-types`

 

2. 컴포넌트에 PropTypes를 정의하여 타입 검증을 추가

jsx코드 복사
import PropTypes from 'prop-types';

function Input({ setList }) {
  // 컴포넌트 구현
}

Input.propTypes = {
  setList: PropTypes.func.isRequired,
};

 

---

마무리

개인 프로젝트를 하면서 .jsx 파일에 타입스크립트를 도입해보았는데, 위에 소개한 방법처럼 많은 방법이 있다는 것을 몸소 느꼈습니다.

앞으로도  TypeScript의 강력한 타입 시스템을 활용하여 더 안정적이고 유지보수하기 쉬운 코드를 작성해보는 것이 스스로도 기대가 됩니다 :)