React 에서의 TypeScript

https://velog.io/@bi-sz/TypeScript
지난 게시글에서 TypeScript 에 대해 간단하게 알아보았습니다.

이번 게시글에서는 React 에서의 TypeScript 를 다루어 보려고 합니다!

⭐ Generic

자료형을 먼저 정의하지 않고 여러 타입들을 사용할 수 있도록 열어두는 것입니다.

const item = <T>(arg:T[]):T[] => {
   return arg;
 }

⭐ 컴포넌트 정의

💫 React.FC<Type>, React.FunctionComponent<Type>💫

const ComponentA: React.FC<Type> = (props) => {
  return <ComponentCode {...etc}/>;
}

props 선언이 맞지 않는다면 다른 결과값이 나타날 수 있습니다.

FC는 Generic 으로 선언되어 있어 안에 타입을 지정해주면 props 에 대한 타입 추론을 하도록 되어있습니다.

💫 useState

const [data, setData] = useState<string>("""")

useState 도 마찬가지로 Generic 의 형태로 선언되어있습니다.

Generic 으로 선언된 <String> 을 통해 state 가 가지고 있는 값이 String 인것을 알 수 있습니다.

💫 useCallback

const onPressed = useCallback <(text:string)=>void>((text)=>{
  {/* do something */}
}, [])

함수 자체를 Generic 로 선언해둔 형태입니다.

💫 useMemo

const onPressed = useMemo<string>(()=>{
  return "text"
}, [])

Generic 의 형태로 선언되어있습니다.

💫 FlatList

<FlatList<TypeFlatListITem>
  data = { /* some data */ }
  renderItem = {()=>{ /* render */ }}
/>

위와 같은 형태로 item 의 Type 을 추론할 수 있습니다.