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

 

 

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

 

 

 

 

📌 적용 이유

• 당연히 해야하는 일이라 생각했다. 이제는 타입스크립트의 시대.
• 타입스크립트를 적용해본 프로젝트가 제대로 없었다. 이 경험을 시작으로 많은 경험을 쌓고 싶다.

 

---

 

🙈 적용전

 

이미 프로젝트가 배포도 된 상태이고 기능 구현이 어느정도 되어서 타입스크립트 변환으로 생길 오류들때문에 약간 걱정되기도 했다

 

얼마나 많은 오류를 뱉어낼지... 😋 그리고 배포에도 문제가 생길까봐 두렵기도 했지만, 어차피 넘어야할 산 하루 빨리 넘어보자.

 

누가 이기나 해보자 아주.

 

 

 

 

📌 기존 파일들

 

🤣 기존 패키지 파일들이다. 이 파일들을 이제 하나씩 jsx => tsx 로 변경시켜줘야 한다.

 

 

 

📌 설치

 

npm install --save typescript @types/node @types/react @types/react-dom

npm i --save-dev @types/react-router-dom
npm i --save-dev @types/styled-components

 

자신의 상황에 맞게 설치하자. 

 

내가 하고 있는 프로젝트에서 필요한 것들을 설치해보았다.

 

 

 

이후 tsconfig.json 생성

 

npx tsc --init

 

 

 

 

---

📌 .jsx => .tsx 로 변경

 

 

App.tsx

 

오우야..... 재밌는걸 허허

 

 

🚫 --jsx' is not set 

 

 

우선 가장 먼저 뜨는 오류는 --jsx' is not set 이다.

 

vsCode에서 타입스크립트의 버전이 제대로 설정되어있지 않아서 뜨는 오류이다.

 

이 오류의 해결 법은 간단하다.

 

 

vs code에서 Ctrl + Shift + P 를 누른뒤 TypeScript : Select TypeScript Version 을 치면 밑에 처럼 나온다.

 

 

여기서 작업 영역 버전 사용을 누르면된다.

 

 

이걸 바꿔줘도 바로 적용이 안되는건지 오류가 사라지지 않았지만 vsCode를 껐다 다시 켜보니 오류가 사라져있다.

 

하나 해결!!

 

 

 

 

 

---

🚫 'React' refers to a UMD global...

 

 

 

 

다음 에러는 이렇게 뜬다.

 

 

이것을 해결하려면 tscofig.json 으로 가서 3번라인을 다음과 같이 수정한다.

 

 

 

 

해결

 

에러가 사라졌다!!!!

 

 

 

야레야레~~ Well Known 이군요 (이제 App.tsx 하나 해결함.)

 

 

다음 해결 하러 가보자~

 

 

---

 

📌 index.js => index.tsx 로 변경

 

 

 

 

변경하자마자 수없이 쏟아지는 에러들

 

 

 

 

그럼 그렇지....

 

 

또 해결하러 가자.

 

 

 

 

근데 알고보니 저 오류는 내가 확장자를 ts로 해서 난 오류였고, tsx로 바꿔주면 사라진다.

 

 

이후, React DOM Render 에러가 나는데 해결 방법은 두가지가 있다.

 

1. root 설정할 때 , ReactDOM.createRoot 로 바꾼다.

 

const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
  ...
    <App />
  ...
);

 

 

2. as HTMLElement 를 뒤에 붙여준다.

 

 

나는 위와 같은 코드로 작성되어있어 간편하게 as HTMLElement만 붙여줬다.

 

 

이렇게 하면 에러가 사라진다!!!!

 

 

---

 

📌 만든 파일들 하나씩 jsx => tsx 로 바꿔가며 에러 해결하기

 

 

tsx로 바꾸면 타입 지정하라고 에러를 막 뱉는다. 하나하나 다 바꿔주자.

 

 

 

 

이 부분은 개인마다 작성된 코드가 다르기 때문에 그냥 참고용으로 사용하면 된다.

 

 

 

 

---

 

📌 백엔드 데이터에 타입 붙이기 

 

현재 불러오는 데이터 형식

 

users에 useRef를 사용하여 초기화 시켜준 뒤 데이터 통신 후 데이터를 저장시켰는데,

 

 

처음에는 빈값이므로 ? 를 사용하여 있을 수도 있고 없을 수도 있다는 것을 표시해주자

 

참고로 다른 파일을 만들어서 interface를 관리 해주었다.

 

 

 

 

📌 styled-components props 에 타입 붙이기

 

이게 나는 제일 어렵게 느껴진 부분이다.

 

아니 왜 안되지를 계속 연발....

 

 

 

이렇게 styled-components에 color props를 넘겨주는 코드가 있는데 넘겨주는 값은 boolean 값이다.

 

 

 

그래서 이렇게 타입 지정을 해줬는데 자꾸 오버로드 에러가 발생....

 

다 되는데 얘만 계속 안된다. 인터페이스도 만들어보고 막해도 안되는데... 흠

 

일단 any로 선언하면 되긴해서 any 처리 해놨다 😥

 

타입스크립트를 처음 적용해봐서 아직 모르는 부분들이 많은데 개발 하면서 꼭 수정해버리겠다..!!!

 

any는 진짜 쓰기 싫음

 

 

 

 

이외의 남은 파일 변환들의 타입선언은 useState나 useRef, 파라미터 쪽이라 하나하나씩 맞춰서 타입선언을 해주었다.

 

 

 

 

📌 완료!

 

어지저찌 파일 하나씩 바꾸다 보니 다했다!!!

 

redux 부분 쪽 파일 두개는 ts 변환후 어떻게 타입을 지정해줘야할지 몰라서 일단 냅뒀다.

 

추후에 학습후 반드시 또 바꾸겠다.

 

다 바꿔보고 배포를 해보니 문제없이 잘 동작한다~!!