해당 벨로그는 [코딩앙마] React js 강좌 를 수강하고 작성한 글입니다.
사실 타입스크립트는 프로젝트 초기에 도입하는 것이 좋다.
하지만, 프로젝트가 어느 정도 진행된 뒤에도 적용할 수 있으니까 늦었다고 생각하지 말고 사용해보기 바란다.
타입스크립트를 설치해보자.
node, react, react-dom, jest
create-react-app 으로 만들어진 프로젝트에 타입스크립트를 적용하려면 상단 이미지 코드까진 꼭 입력해야 한다.
그리고 추가적으로 설치한 react-router-dom 의 타입도 설치해준다.
Word 컴포넌트로 이동해 Word.js 에서 Word.tsx 로 이름을 변경한다.
타입스크립트는 일반적으로 js 파일은 ts, jsx 파일은 tsx 확장자를 사용한다.
Word.tsx
인터페이스 IProps 를 선언한다. 그리고 {word:w} 라는 props 에 IProps 를 선언한다.
그렇게 되면 에러가 발생하는데, Iprops 형식에 word 라는 프로퍼티가 없어서 그렇다.
word 프로퍼티에 any 타입을 선언했다.
any 를 사용하면 타입스크립트를 사용하는 이유가 없어진다.
any 는 모든 것을 허용하기 때문에 절대 남발하면 안된다.
인터페이스는 여러개의 프로퍼티에 각각 다른 타입을 입력할 수 있다.
여러 타입이 담긴 인터페이스 IWord 를 word 에 타입으로 할당한다.
word + 점(.) 을 찍으면 어떤 프로퍼티가 있는지 확인할 수 있다.
오타를 내거나 없는 프로퍼티를 사용하는 실수를 줄일 수 있다.
word.id. 을 찍으면 숫자 타입일 때 사용할 수 있는 메소드들이 뜬다.
이전 시간에 코딩한 부분에서 에러가 난다.
삭제 구현 함수에서 삭제가 성공적으로 되었다면, 그 word 의 id 를 0 으로 바꿔주는 부분이다.
이 때 다른 프로퍼티의 모든 부분을 모두 없애버려서 에러가 난다.
IWord 는 항상 5가지 프로퍼티의 값을 모두 가져야 하는데 그렇지 않아서이다.
만약 id 외에 다른 프로퍼티들을 optional 로 두면 에러는 해결된다.
하지만, 삭제할 때를 제외하고는 항상 모든 값이 필요하니까 optional 로 두는 방법은 그리 좋은 방법이 아니다.
단순히 에러를 없애는 방법을 위해 생각했던 방법과 다르게 로직을 짜면 안된다.
optional 방법을 다시 되돌리고, 에러를 잠시 해결하기 위해 다른 값도 setWord 에 넣어준다.
기존의 word 객체를 그대로 사용하면서, id 만 0 으로 바꿔줬다.
Day.tsx
word.id 에서 에러가 난 것은 IWord 인터페이스의 존재를 몰라서다.
words 를 반복하고 있는데, words 가 IWord 의 배열이라는 것을 알려주자.
Word.tsx 에 만들어놓은 인터페이스 IWord 에 export 를 붙인다. export 하면 다른 파일에서도 IWord 인터페이스를 사용할 수 있다.
Word.tsx 에 인터페이스 IWord 를 import 해준다.
Day.tsx 에 words 에 IWord[] 를 지정해주면 하단의 word.id 에 있는 에러가 사라졌음을 알 수 있다.
꺾쇠<> 는 제네릭이라고 한다. 어떤 타입을 사용할지 파라미터처럼 가져와서 사용할 수 있다.
DayList.tsx
지금 day 객체에 대한 타입이 없어 에러가 발생했다.
IWord 처럼 IDay 라는 인터페이스를 만들자.
data.json 을 확인하면 day 는 2개의 프로퍼티가 있음을 확인할 수 있다.
IDay 의 프로퍼티들의 데이터 타입을 지정했다.
days 는 IDay 의 배열이다.
사실 처음부터 타입스크립트를 적용해서 개발했다면, 개발 속도가 훨씬 올랐을 것이다.
CreateWord.tsx
DayList.tsx 의 IDay 를 export 하고, days 에 IDay 를 지정한다.
e(event) 에 타입을 줘야 한다.
form 형식을 Submit 하는 이벤트는 React.FormEvent 로 타입을 주면 된다. 사실 이 부분은 외우는 방법 밖에 없다.
이 에러는 타입스크립트의 문제는 아니고, 리액트를 사용할 때도 주의해야되는 부분이다.
Ref.current 는 랜더링이 완료된 이후에도 없을 수 있다.
예를 들어, 조건에 따라 input 이나 버튼이 보였다가 안보였다가 할 수 있다.
Ref.current 사용시 null 인지 아닌지 체크해주는 것이 좋다.
Ref 객체의 타입을 먼저 입력해보자.
Ref 객체의 타입은 제네릭<> 을 이용한다.
확인해보면 영어, 뜻은 input 이고, day 는 select 태그로 구성된다.
이럴 때는 html 엘리먼트 타입을 입력해준다.
이러면 초기값은 null 이고, input 의 값들은 value 라는 프로퍼티와 연결되어있다고 예상할 수 있다. 왜냐하면 html 태그와 똑같이 동작하기 때문이다.
세가지 Ref 중 하나라도 없으면 요청자체를 보내면 안된다.
dayRef, engRef, korRef 의 current 3가지에서 하나라도 없다면, 하단의 코드는 실행되지 않는다.
if 문의 구문에서 dayRef, engRef, korRef 의 current 3가지가 검증되어 하단의 코드로 들어가기 때문에 에러가 해결된다.
useFetch.ts
useFetch 는 js 를 반환하는 파일이 아니니 ts 로 바꿔주면 좋다.
url 에 string 이라고 입력하면 에러가 해결된다.
create-react-app 으로 만든 리액트 프로젝트를 타입스크립트로 바꿔보았다.
처음부터 타입스크립트를 도입하는 게 가장 좋고, 프로젝트 도중에 타입스크립트를 설치해 사용해도 되니까 너무 부담갖지 않아도 된다.
익숙해지면 타입스크립트를 사용하는 것이 개발 속도를 훨씬 더 빠르게 하고 오류도 많이 줄일 수 있다. 코드 퀄리티도 그만큼 올라간다.
