2023-01-18 수요일

✏️ 무엇을 배웠나

---

1. 리액트 리덕스 -> TS로 리팩토링 맛봄

에러모음

1) React refers to a UMD ......

TS 설정하자 맞아 나를 반겨주는 문제 10개.

일단 문제의 90%를 차지하고 있는 이 에러부터 해결해보자.

'React' refers to a UMD global, but the current file is a module. Consider adding an import instead.

리액트를 import 해달라는 거 같아서 눈치껏 아래 코드를 넣어줬더니 해결됐다.

import React from 'react';

그런데 리액트는 이제 위 코드를 작성하지 않아도 되는데, 다른 방법이 없나 구글링을 시도했더니 역시나 stackvoerflow에서 찾을 수 있었다. typescript 공식문서에서도 같은 내용을 찾을 수 있었다.

컴파일러 옵션을 추가하면 import를 하지 않아도 된다.

tsconfig.json 파일을 열어서 아래 코드와 같이 "jsx": react-jsx를 추가해주면 된다. 그러면 리액트를 import하지 않아도 에러가 뜨지 않는다.

{
	"compilerOptions": {
		"jsx": react-jsx,
	},
}

2) 라이브러리 못 읽어올 때

react-redux를 못 읽어온다.

Cannot find module 'react-redux'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option?

다시 구글링.
타입스크립트가 react-redux를 지원하지 않는다.
@types를 이용해서 설치해주면 된다.
원글 벨로퍼트님 블로그

yarn add redux react-redux @types/react-redux

해결.

yarn add @types/라이브러리이름 이렇게 설치하면 라이브러리 못 불러오는 문제는 거의 해결된다. 같은 방법으로 uuid 로드 실패 문제를 해결했다.

3) DOM event 타입 정의하는 방법

타입스크립트로 DOM event 타입을 정의하는 방법

const HandleTodoValue = (event) => {
	setTitle(event.target.value);
};

event 타입을 정의하고 싶은데 어떻게 정의해야 할지 난감.

일단 이벤트핸들러 함수가 정의된 파트로 가서

<input
	value={title}
	onChange={event => console.log(event)} // event에 마우스 커서를 올려보면 무엇과 매치되는지 알려줌
	type='text'
/>

React.ChangeEvent<HTMLInputElement> 이걸 event의 타입으로 정해주면 됨.
이런 방식으로 모든 DOM 이벤트 타입을 정의할 수 있음.

4) props 타입 정의하기

props는 interface를 사용해서 타입을 지정해줄 수 있다

// 이전 코드
function TodoList({ isActive })

// ts 코드
interface Iprops {
	isActive: boolean
}

function TodoList({ isActive }: Iprops)

🥵 무엇이 어려웠나

---

1. 리덕스 코드를 TS로 바꾸기

공식 문서든 깃허브 문서든 블로그든 스택오버플로우든 다 찾아봤는데 오늘은 잘 되지 않았다.

🏷️ 오늘의 코멘트

TS... 죽인다... 🎃