[우아한 타입스크립트] 8장

📍 리액트 컴포넌트의 타입

클래스 컴포넌트 타입

interface Component<P = {}, S = {}, SS = any> extends ComponentLifecycle<P, S, SS> {}

class Component<P, S> {
  /* ~~ */
}

class PureComponent<P = {}, SS = any> extends Component<P, S, SS> {}

React.Component와 React.PureComponent의 타입 정의는 위 코드와 같고 P와 S는 각각 props와 상태를 의미한다..

상태가 있는 컴포넌트일 때는 제네릭의 두 번째 인자로 타입을 넘겨주면 상태에 대한 타입을 지정할 수 있다.

 

함수 컴포넌트 타입

함수 표현식을 사용해 함수 컴포넌트 선언할 때 가장 많이 볼 수 있는 형태는 React.FC나 React.VFC로 타입을 지정하는 것이다.

FC는 FunctionComponent의 약자로 React.FC와 React.VFC는 리액트에서 함수 컴포넌트의 타입 지정을 위해 제공되는 타입이다.

React.FC는 암묵적으로 children을 포함하고 있기 때문에 해당 컴포넌트에서 children을 사용하지 않아도 children props를 허용한다. 따라서 children props가 필요하지 않은 컴포넌트에서는 더 정확한 타입 지정을 위해 React.VFC를 많이 사용한다.

하지만 리액트 v18로 넘어오면서 React.VFC가 삭제되고 React.FC에서 children이 사라져서 React.FC나 props 타입, 반환 타입을 직접 지정하는 형태로 타이핑해줘야 한다.

 

Children props 타입 지정

type PropsWithChildren<P> = P & { children?： ReactNode | undefined };

보편적인 children 타입은 ReactNode | undefined 가 된다.

ReactNode는 ReactElement 외에도 여러 타입을 포함하는 타입으로 구체적으로 타이핑하는 용도에는 적합하지 않다.

특정 문자열만 허용하고 싶을 때는 children에 대해 추가로 타이핑해줘야 한다.

children에 대한 타입 지정은 다른 prop 타입 지정과 동일한 방식으로 지정할 수 있다.

 

render 메서드와 함수 컴포넌트의 반환 타입 - React.ReactElement vs JSX.Element vs React.ReactNode

interface ReactElement<P = any,
  T extends string | JSXElementConstructor<any> =
  | string
  | JSXElementConstructor<any>
> {
  type: T;
  props: P;
  key: Key | null;
}

 

리액트는 실제 DOM이 아니라 가상의 DOM을 기반으로 렌더링하는데 가상 DOM의 엘리먼트는 ReactElement 형태로 저장된다.

ReactElement 타입은 리액트 컴포넌트를 객체 형태로 저장하기 위한 포맷

 

JSX.Element 타입은 앞의 코드를 보면 알 수 있다시피 리액트의 ReactElement를 확장하고 있는 타입이며

글로벌 네임스페이스에 정의되어 있어 외부 라이브러리에서 컴포넌트 타입을 재정의할 수 있는 유연성을 제공한다.

 

👉🏻 글로벌 네임스페이스

프로글래밍에서 식별자가 정의되는 전역적인 범위

자바스크립트나 타입스크립트에서는 기본적으로 전역 스코프에서 선언된 변수나 함수 등은 글로벌 네임스페이스에 속한다.

 

type ReactText = string | number;
type ReactChild = ReactElement | ReactText;
type ReactFragment = {} | Iterable<ReactNode>;

type ReactNode =
  | ReactChild
  | ReactFragment
  | ReactPortal
  | boolean
  | null
  | undefined;

 

ReactElement, ReactNdoe, JSX.Element 활용하기

3개 전부 리액트의 요소를 나타내는 타입

 

ReactElement

JSX가 createElement 메서드를 호출하기 위한 문법

JSX는 리액트 엘리먼트를 생성하기 위한 문법이며 트랜스파일러는 JSX 문법을 createElement 메서드 호출문으로 변환해 리액트 엘리먼트를 생성한다.

 

ReactNode

ReactChild 타입은 ReactElement 보다는 좀 더 넓은 범위를 가진다.

ReactNode는 ReactChild 외에도 boolean, null 등 더 넓은 범주의 타입을 포함한다.

ReactNode는 리액트의 render 함수가 반환할 수 있는 모든 형태를 담고 있다.

 

JSX.Element

declare global {
  namespace JSX {
    interface Element extends React.ReactElement<any, any> {
      //...
    }
    //...
  }
}

JSX.Element는 ReactElement의 제네릭으로 props와 타입 필드에 대해 any 타입을 가지도록 확장하고 있다.

JSX.Element는 ReactElement의 특정 타입으로 props와 타입 필드를 any로 가지는 타입이라는 것을 알 수 있다.

 

 

리액트에서 기본 HTML 요소 타입 활용하기

 

DetailedHTMLProps와 ComponentWithoutRef

HTML 태그 속성 타입을 활용하는 대표적인 타입 2개는 리액트의 DetailedHTMLProps와 ComponentPropsWithoutRef 타입을 활용하는 것

React.DetailedHTMLProps를 활용하는 경우에는 HTML 태그 속성과 호환되는 타입을 선언할 수 있다.

type NativeButtonProps = React.DetailedHTMLProps<
  React.ButtonHTMLAttributes<HTMLButtonElement>,
  HTMLButtonElement
>;

type ButtonProps = {
  onClick?: NaticeButtonProps["onClick"]
};

 

type NativeButtonType = React.ComponentPropsWithoutRef<"button">;
type ButtonProps = {
  onClick?: NativeButtonType["onClick"];
};

 

 

✨ 타입스크립트로 리액트 컴포넌트 만들기

JSX로 구현된 Select 컴포넌트

const Select = ({ onChange, options, selectedOption }) => {
  const handlechange = (e) => {
    const selected = Object.entries(options)
      .find(([_, value]) => value === e.target.value)?.[0];
    onChange?. (selected);
  };

  return (
    <select
      onChange={handlechange}
      value={selectedOption 8& options[selectedOption]}
    >
      {Object.entries(options).map(([key, value]) => (
        <option key={key} value={value}>
          {value}
        </option>
      ))}
    </select>
  );
};

위 컴포넌트는 각 option의 키-값 쌍을 객체로 받고 있으며 선택된 값이 변경될 때 호출되는 이벤트 핸들러를 받도록 구현되어 있다.

따라서 컴포넌트를 사용하는 개발자가 각 속성에 어떤 타입의 값을 전달해야 할지 명확히 알 수 있도록 추가적인 설명이 필요하다.

 

 

JSDocs로 일부 타입 지정하기

컴포넌트의 속성 타입을 명시하기 위해 JSDocs를 사용할 수 있다.

JSDocs를 활용하면 컴포넌트에 대한 설명과 각 속성이 어떤 역할을 하는지 간단하게 알려줄 수 있다.

/**
  * Select 컴포넌트
  * @param {Object} props - Select 컴포넌트로 넘겨주는 속성
  * @param {Object} props.options - { [key： string]： string } 형식으로 이루어진 option 객체
  * @param {string | undefined} props.selectedOption - 현재 선택된 option의 key값
  (optional)
  * @param {function} props.onChange - select 값이 변경되었을 때 불리는 callBack 함수
  (optional)
  * @returns {JSX.Element}
  */
const Select = //...

 

 

props 인터페이스 적용하기

JSDocs를 활용하면 각 속성의 대략적인 타입과 어떤 역할을 하는지 파악할 수 있지만 options가 어떤 형식의 객체를 나타내는지나 onChange의 매개변수 및 반환 값에 대한 구체적인 정보를 알기 쉽지 않아 잘못된 타입이 전달될 수 있는 위험이 존재한다.

이런 문제를 해결하기 위해 타입스크립트를 사용해 좀 더 정교하고 구체적인 타입을 지정할 수 있다.

 

리액트 이벤트

리액트는 가상 DOM을 다루면서 이벤트도 별도로 관리한다.

DOM 엘리먼트에 등록되어 처리하는 이벤트 리스너와 달리 리액트 컴포넌트에 등록되는 이벤트 리스너와 달리 리액트 컴포넌트에 등록되는 이벤트 리스너는 카멜 케이스로 표기한다.

리액트 이벤트는 브라우저의 고유한 이벤트와 완전히 동일하게 동작하지는 않는다.

 

훅에 타입 추가하기

useState 같은 함수 역시 타입 매개변수를 지정해 줌으로써 반환되는 state 타입을 지정해 줄 수 있다.

만약 제네릭 타입을 명시하지 않으면 타입스크립트 컴파일러는 초깃값의 타입을 기반으로 state 타입을 추론한다.

type Fruit = keyof typeof fruits; // 'apple' | 'banana' | 'blueberry';
const [fruit, changeFruit] = useState<Fruit | undefined>("apple");
// 에러 발생
const func = () => {
changeFruit ("orange”);
};

keyof typeof obj는 해당 객체의 키값을 유니온 타입으로 추출하는 패턴으로 자주 사용된다.

훅이나 외부 라이브러리 또는 내부 모듈의 함수는 적절한 제네릭 타입을 설정해 활용할 수 있다.

 

제네릭 컴포넌트 만들기

const FruitSelect = () => {
  const [fruit, changeFruit] = useState<Fruit | undefined>();
  
  return (
    <Select onChange={changeFruit} options={fruits} selectedOption="orange" />
  );
};

selectedOption은 options에 존재하지 않는 값을 받아도 아무런 오류가 발생하지 않는다.

함수 컴포넌트 역시 함수라서 제네릭을 사용한 컴포넌트를 만들어낼 수 있다.

interface SelectProps<OptionType extends Record<string, string>> {
  options: OptionType;
  selectedOption?: keyof OptionType;
  onChange?: (selected?: keyof OptionType) => void;
}

const Select = <OptionType extends Record<string, string>>({
  options,
  selectedOption,
  onChange,
}: SelectProps<OptionType>) => {
  // Select component implementation
};

위 코드에서는 객체 형식의 타입을 받아 해당 객체의 키값을 selectedOption, onChange의 매개변수에만 적용하도록 만든 예시다.

Select 컴포넌트에 전달되는 props의 타입 기반으로 타입이 추론되어 <Select<추론된 타입>> 형태의 컴포넌트가 생성된다.

 

HTMLAttributes, ReactProps 적용하기

className, id와 같은 리액트 컴포넌트의 기본 props를 추가하려면 SelectProps에 직접 className?: string; id?: string;을 넣어도 되지만 리액트에서 제공하는 타입을 사용하면 더 정확한 타입을 설정할 수 있다.

type ReactSelectProps = React.ComponentPropsWithoutRef<"select">;

interface SelectProps<OptionType extends Record<sring, string>> {
  id?: ReactSelectProps["id"];
  className?: ReactSelectProps["className"];
  //...
}

ComponentPropsWithoutRef는 리액트 컴포넌트의 prop 타입을 반환해주는 타입이다.

Type['key']를 활용하면 객체 형식의 타입 내부 속성값을 가져올 수 있다.

ReactProps에서 여러 개의 타입을 가져와야 한다면 Pick 키워드를 사용할 수 있다.

 

공변성과 반공병성

일반적인 타입들은 공변성을 가지고 있어 좁은 타입에서 넓은 타입으로 할당이 가능하다.

하지만 제네릭 타입을 지닌 함수는 반공변성을 가진다.

안전한 타입 가드를 위해 특수한 경우를 제외하고는 일반적으로 반공변적인 함수 타입을 설정하는 것이 권장된다.