[21장] 타입스크립트 in React (Component, State)

이제는 정말 대세가 돼버린 타입스크립트를 당연히 리액트에서도 쓸 줄 알아야 한다. 타입스크립트 도입의 장점은 IDE를 더 잘 쓸수있고, 실수를 방지할 수 있기 때문이다. 특히 프로젝트의 규모가 커질수록 타입스크립트의 이점이 커진다. 

 

1. 컴포넌트 생성하기

Props 설정만 잘해줘도 ㄹㅇ 반은 먹고 간다

2. 상태 관리하기​

가. useState

취지는 'useState로 만들 상태는 <Generic>으로 타입 지정해주면 된다' 였으나 타입추론이 되는 마당에 굳이 쓸 필요가 있을까? 

타입 추론이 안되는 경우에나 신경써서 달아주자. 아래처럼 null이 올 수 있는 경우처럼.

type Information = { name: string; description: string };
const [info, setInformation] = useState<Information | null>(null);

 

나. useReducer

리듀서 생각이 가물가물할 수도 있는데, 아래와 같은 흐름을 갖는 Hook이다.

• action에 따라 수행할 행동을 reducer란 이름으로 정의해놓고,
• dispatch 함수로 원하는 action을 주입/활성화 시켜
• 리듀서가 dispatch된 action을 보고 적당한 동작을 취한다