React | TypeScript

Props Type

Primitive Type

type AppProps = {
  title: string;
  id: number;
  disabled: boolean;
}

const App = (props: AppProps) => {
  ...
}

Union (String Literal)

type AppProps = {
  status: "success" | "failure";
  userType: "user" | "admin" | "guest";
}

const App = (props: AppProps) => {
  ...
}

Object

type AppProps = {
  obj: {
    id: string,
    title: string
  };
  dict: {
    [key: string]: MyType;
  };
}

const App = (props: AppProps) => {
  ...
}

✅ Dict

• Dict는 사전형 타입으로, key-value 쌍을 이루는 객체이다.
• TypeScript에서는 Record<string, MyType>과 같이 작성 가능함.

EventHanlder Function

type AppProps = {
  onClick: () => void;
  onChange: (id: number) => void;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  onClick(event: React.MouseEvent<HTMLButtonElement>): void; 
}

const App = (props: AppProps) => {
  ...
}

함수 Type 표현

• 호출 시그니처: (arg: number): void
• 타입 표현식: (arg: number) => void
• 제네릭 함수:

function returnValue<Type>(arr: <Type>): Type {
	return arr;
}

setState Function

• 부모 컴포넌트의 setState Function을 자식 컴포넌트에 props로 전달할 때

예시>

// 부모 컴포넌트
const ParentComponent = () => {
  const [userName, setUserName] = useState('');
  
  return (
    <ChildComponent setUserName={setUserName} />
  )  
}

// 자식 컴포넌트
type Props = {
  setUserName: React.Dispatch<React.SetStateAction<string>>;
  // string 대신 다른 type을 대입하면 OK
}

const ChildComponent = (props: Props) => {
  const changeState = (e) => {
    setUserName(e.target.value);
  }
  
  return (
    <input
       ...
       onChange={changeState}
      />
  )
}

Props

interface AppProps {
  children?: React.ReactNode;
  childrenElement: React.JSX.Element;
  style?: React.CSSProperties;
  onChange?: React.FormEventHandler<HTMLInputElement>;
  props: Props & React.ComponentPropsWithoutRef<"button">; // not forwards ref
}

---

React.ReactNode

• 대부분의 JSX 컴포넌트, 요소를 포함하는 상위 개념.

type ReactNode = ReactElement | string | number | ReactFragment | ReactPortal | boolean | null | undefined;

• ReactElement, ReactChild, JSX.Element 등을 포함.
• ReactFragment, ReactPortal 등을 포함.
• string, number, boolean, null, undefined 등 원시 타입을 포함.

React.ReactElement

• createElement 함수를 통해 생성된 객체에 지정.
• 원시타입을 포함하지 않음.
• 완성된 JSX 요소, 즉 컴포넌트만을 허용. (type, props, key 존재)

Class vs. Functional Component

클래스형 컴포넌트

• React.ReactNode Type을 기본으로 리턴함.

함수형 컴포넌트

• React.ReactElement Interface를 기본으로 리턴함.

React.ReactChild

• ReactElement, ReactText(string, number)을 포함한다.

React.JSX.Element

• ReactElement를 상속받은 Interface.

KeyPoint

• 컴포넌트를 자식(props)으로 받아 사용하는 경우, 정확한 Interface인 ReactElement를 이용하자.