[회고록] 리액트에서 타입스크립트를 적용하면서 쓴 경험 회고

📃 개요

리액트에서 타입스크립트를 적용하면서 공부하고 투두리스트 프로젝트까지 진행

 

 

 

⏳ 공부 기간

공부 5일 + 블로그에 글 작성 2일 = 총 7일

 

 

 

💻 사용한 기술

개발

· React

· TypeScript

 

 

 

✍ 회고록

일기장처럼 회고록을 작성하겠습니다. :)

 

🙂 공부 & 프로젝트 진행 전

리액트에 적용하기 전에 타입스크립트를 문법 위주로 선행학습을 했다. 기본 타입인 String, Number, Boolean ··· 등과 관련된 내용으로 보여서 타입만 명시 해주면 되는 것 같았다. 

 

프론트엔드의 새로운 언어를 두려워하지 않고 즐거워서 곧바로 적용했다. 새로운 언어를 빠르게 적용하면서 했다.

 

 

 

😭 공부 & 프로젝트 하면서 어려웠던 점

0. 처음 만난 React.FC<>, React에서 제공하는 타입

리액트에서 function 키워드를 사용해서 선언했다. 반면 화살표함수로 React.FC 라는 것을 선언하고 <>에서 타입을 지정하면서 사용할 때 이해가 안 되고 어려워서 React.FC 사용하지 않고 익숙하게 할 수 있는 function 키워드로 하는 방법을 찾아봤다. 

 

찾고 또 찾아서 블로그를 봤다. 객체 기본 값으로 사용하는 글을 보고 적용했다. React.FC 사용 또는 사용하지 않음에 대해서 버전 이슈가 있거나, 타입 오류가 있다는 ··· 등과 관련된 글이 있었다.

 

내가 참고했던 블로그는 pxd라는 대형 에이전시 블로그다.

https://story.pxd.co.kr/1650

React.FC에 대하여

 

 

여러 글을 보고 기술의 방식에 대해서 고민 후 기본으로 사용하는 것부터 공부하기로 했다. React.FC, <>, children, defaultProps, React에서 제공하는 타입 ··· 등과 관련하여 코드가 길어져서 사용하지 않았고 이슈가 있다는 글을 참고하여 사용하지 않았다. (추후에 다방면으로 사용해 보고 싶었다.)

 

 

 

1. useState([ ]); 배열 넘길 때 오류때문에 어려웠다.

부모 컴포넌트에서 자식 컴포넌트로 useState([ ]); 배열을 전달할 때 useState<string[ ]>([ ]); 타입을 지정했다. 자식 컴포넌트로 넘겨서 파라미타에서 어떻게 타입을 받아서 사용하는 지 어려웠고 오류가 많이 생겼다.

 

처음 만났던 오류는 useState([ ]); 배열을 자식 컴포넌트에게 넘길 때 오류났다. 나는 타입스크립트에서 배웠던 const strs: string[ ] = [ "ㄱ", "ㄴ", "ㄷ" ]; 단순하게 타입 지정으로 생각했던 것이었다.

 

 

처음 만났던 오류뿐만 아니라 이것저것 하다가 만났던 오류를 구글링하면서 코드를 수정하면서 공부했다.

 

 

해결 후 느낀 점은 props 전달하는 과정에서 타입이 일치해야 한다는 것이다. 전달할 때 문법과 타입에서 많은 오류가 있었다.

 

이 오류로 인하여 타입 지정에 대해서 많이 알았고 다른 방식으로도 할 수 있다는 것도 알았다. 또 다시 같은 오류나 다른 오류를 만나면 해결할 수 있을 것 같았다. 그리고 익숙해지기 위해서 많이 해볼 수밖에 없었다.

 

 

 

3. 제네릭 함수 사용 조금 이해하기 어려웠다.

· 코드가 길어졌다.

· 화살표 함수에 <> 안에 타입 지정

· 리액트에서 제공하는 타입스크립트

 

 

 

4. 어떤 방식으로 하면 좋을까?

type, interface, 객체 이것저것 구글링하다가 여러 방식을 알고 어떤 방식으로 props 값을 전달하면 좋을까? 고민했다. 공식 문서, 여러 블로그를 보다가 하나의 방식으로 선택하여 하라는 글을 보고 참고하여 작업했다.

 

 

 

😊 공부 후 얻은 것

리액트 + 타입스크립트 프로젝트를 할 수 있게 됐고 리액트에서 타입스크립트로 마이그레이션 할 수 있을 것 같았다.

 

제네릭 함수를 활용하여 타입 지정하고 props 값 전달, 컴포넌트 제작, 기술의 방식을 얻었다. 구글링하면서 여러 잡(?)지식도 얻으면서 인사이트도 얻었다. 

 

리액트, 타입스크립트뿐만 아니라 여러 방식이 있고 그중에서 프로젝트의 방향성(?)을 보고 팀원들과 방식을 정하고 시작해야 한다는 것이다.

 

 

 

📚 더 공부해야 할 것

익숙해지기 위해서 많이 해볼 수밖에 없다. 작업해 보고 구글링해서 남의 코드도 보면서 이해하고 활용하면서 인사이트를 얻어서 내 것으로 만들고 더 복잡한 프로젝트에 적용하면서 문제를 해결해야 할 것 같다.

 

공부하면서 프로젝트를 했지만 리액트랑 타입스크립트를 더 공부해야 할 것 같았다. 리액트 훅 관련하여 공부하고 사용하는 이유도 알면서 사용해야 할 것 같다.

 

 

 

👋 끝

긴 글 읽어주셔서 고맙습니다. :)