[포스코x코딩온] 웹개발자 풀스택 과정 15주차 회고 | React: [TypeScript]

React에서 TypeScript사용하기

 

React + TypeScript 프로젝트 생성하기

npx create-react-app 프로젝트 이름 --template typescript

 

기존 프로젝트에 TypeScript 적용하기:

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

# 필요한 모듈 설치 + js & jsx 파일을 ts & tsx 파일로 변경 + tsconfig.json 파일 생성

---

Props & Interface

• props를 이용해 특정 component가 데이터를 상위 component로부터 받을 때는 해당 데이터 props가 어떤 형태로 넘어오는지 type을 미리 interface로 정의해줘야 한다.

• 상위 component는 하위 component에서 받을 props를 정의했다면 하위 component에서 props를 사용하지 않더라도 정의된  props를 무조건 전달해줘야 한다. 이미 정의된 속정의 props를 전달해주고 싶지 않을 경우가 있다면, 하위 component에 정의된 interface에서 해당 속성이 선택적 속성이(optional property)라는 것을 명시해 주면 된다.( 명시할 key 바로 뒤에 물음표(?)를 추가)

---

useState() & generic <T>

• useState()의 초기값에 대한 type을 generic을 이용해서 설정한다.

• setState를 이용해서 state를 변경할때에도 generic으로 정해준 type으로만 변경이 가능하다.
• TypeScript는 type 유추를 알아서 잘해주기에 기본적으로는 useState를 사용할 때 generic을 쓰지 않아도 괜찮다.
• state의 값이 null 일 수도 있고 아닐 수도 있을 때, 반드시 generic으로 union type을 전달해야 한다.

---

useRef() & generic <T>

• useRef()의 초기값에 대한 type을 generic을 이용해서 설정한다.

• DOM 객체에 접근하기 위한 useRef()의 generic에는 type에 HTMLElement type을 이용한다.

---

event 객체의 type

 

• click event의 e.target, keydown event의 e.key와 e.code, change event의 e.target.value 등 html 요소에 이벤트를 적용할 경우, 이벤트가 발생한 요소에 대한 정보가 담겨 있는 event 객체의 타입은 아래와 같이 지정해 줄 수 있다.

---

느낀 점들

 

JavaScript는 동적인 언어인 관계로 데이터를 유동적으로 처리하는 애플리케이션에서는 원하는 형태로 데이터가 받아지거나 보내지지 않을 경우도 생기고 어쩔 때는 에러가 발생하여 코드 실행이 안 되는 경우도 있었습니다. TypeScript를 이용하여 어떤 타입의 데이터가 오는지, 그리고 보내질지 미리 정의를 해준다면 이런 예기치 않은 문제들이 덜 발생할 것으로 보이기에 상황에 따라 적절하게 사용한다면 엄청 큰 도움을 받을 수 있을 거 같다고 생각했습니다.