React + TypeScript

https://react-typescript-cheatsheet.netlify.app/

기본 숙지 필요
: https://react.dev/
: https://www.typescriptlang.org/docs/handbook/2/basic-types.html
: https://www.typescriptlang.org/docs/handbook/2/everyday-types.html

Function Components
https://react-typescript-cheatsheet.netlify.app/docs/basic/getting-started/function_components/
이러한 함수는 props 인수를 사용하고 JSX 요소를 반환하는 일반 함수로 작성될 수 있습니다.

const App: React.FunctionComponent<{ message: string }> = ({ message }) => (
  <div>{message}</div>
);

React.FC 는 기본 function과 다르게 return type을 명시한다.
displayName, propTypes, defaultProps와 같은 정적 property의 타입체크와 자동완성을 제공한다.
React.FC에서 defaultPropes를 사용할때 알려진 몇가지 문제가 있다.
React 18이 업데이트 되기 전, React.FC는 children의 암묵적인 정의를 제공했다.
이것은 논쟁중인 이유이며 CreateReact App TypeScript 템플릿에서 FC가 제거된 이유이다.
React.FC 대신 보통 함수를 사용해라.

type Props = { foo: string };

// OK now, in future, error
const FunctionComponent: React.FunctionComponent<Props> = ({
  foo,
  children,
}: Props) => {
  return (
    <div>
      {foo} {children}
    </div>
  ); // OK
};

// Error now, in future, deprecated
const VoidFunctionComponent: React.VoidFunctionComponent<Props> = ({
  foo,
  children,
}) => {
  return (
    <div>
      {foo}
      {children}
    </div>
  );
};

Class Components
React.Component는 일반 유형으로, 다음과 prop과 state를 매개변수로 제공합니다.

type MyProps = {
  // using `interface` is also ok
  message: string;
};
type MyState = {
  count: number; // like this
};
class App extends React.Component<MyProps, MyState> {
  state: MyState = {
    // optional second annotation for better type inference
    count: 0,
  };
  render() {
    return (
      <div>
        {this.props.message} {this.state.count}
      </div>
    );
  }
}

React component guide : Class vs Functional
https://www.educative.io/blog/react-component-class-vs-functional
React 버전 16.8에서는 클래스 구성 요소가 기능 구성 요소로 대체되었습니다.

참고 프로젝트
https://react.fluentui.dev/?path=/docs/concepts-introduction--page