React & TS (23/06/13)

리액트에서의 타입스크립트 작성을 위한 간단 매뉴얼

1. 컴포넌트에서 프로퍼티 전달하기
   타입 정의는 항상 전달 받는 쪽에서
   
   

// 상위 컴포넌트
const MainComponent = () => {
  return (
    <SubComponent name="kim" />
  )
}

// 하위 컴포넌트
const SubComponent = ({name}: {name : string}) => {
}

2. 전달할 인자가 둘 이상이라면 인터페이스를 사용합시다

interface SubProps {
  name: string;
  age: number;
}


const SubComponent = ({name, age}: SubProps) => {
}

3. 재사용될 인터페이스라면 확장 문법 고려하기

interface Human {
  name: string;
  age: number;
}

interface Block8 exntends Human {
  license: boolean
}

const SubComponent = ({name, age, license}: Block8) => {
}

4. 함수를 넘길 때는 리턴 타입에 대한 정의도 해줘야 합니다
   따로 리턴값이 없는 함수라면 () => void

const handleClick = () => {
  // 함수 로직
  return true
}


const MainComponent = () => {
  return (
    <SubComponent onClick={handleClick} />
  )
}


interface SubProps {
  onClick: () => boolean
}

const SubComponent = ({onClick}: SubProps) => {
}

5. 핸들러 함수에 대한 타입지정 방법

• 이벤트 객체는 이벤트의 종류 + 발동시킬 엘리먼트까지 타입을 체크합니다
• catch문에서 error 객체의 타입은 기본적으로 Error

const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
  // 이벤트 처리 로직
}

const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
  // 이벤트 처리 로직
}


try {} catch (error: Error){}

6. 객체화된 상태에 대한 타입 정의는 이런 식으로

interface Human {
  name: string;
  age: number;
}
...

const [state, setState] = useState<Human | null>(null);

...

setState({ name: 'jh', age: 31 });

7. 상태변경 함수를 프로퍼티로 넘길 때는 문법이 다소 생소하긴 합니다

interface SubProps {
  setState: React.Dispatch<SetStateAction<boolean>;
}

const SubComponent = ({setState}: SubProps) => {
}

8. interface 대신 type으로도 배열에 대한 타입 정의 가능

type Work = {
id: number;
text: string;
done: boolean;
}

const [state, setState] = useState<Work[]>([])

타입 vs 인터페이스

• 인터페이스: 확장(extends) 가능, 다중 상속 가능
• 타입 : 객체 이외에도 타입 지정 가능, 확장이나 상속 불가능

개인적으로는 좀 더 유연한 interface를 선호합니다