Component 작성

typescript로 컴포넌트를 작성하는 법에 대해 기록한다.

@ = ./src

mkdir ./src/components && touch ./src/components/ExplictComponent.tsx && touch ./src/components/ImplictComponent.tsx

Explict Component

@/src/components/ExplictComponent.tsx

import React from "react";

type TProps = {
  text?: string;
};
const ExplictComponent: React.FC<TProps> = ({ text = "explict" }) => {
  return <div>Component: {text}</div>;
};

export default ExplictComponent;

Implict Component

@/src/components/ImplictComponent.tsx

import React from "react";

type TProps = {
  text: string;
};
const ImplictComponent = ({ text }: TProps) => {
  return <div>Component: {text}</div>;
};

export default ImplictComponent;

App.tsx

import React from "react";
import ExplictComponent from "@/components/ExplictComponent";
import ImplictComponent from "@/components/ImplictComponent";

const App = () => {
  return (
    <React.Fragment>
      <div>This is App.jsx</div>
      <ImplictComponent text="implict" />
      <ExplictComponent />
    </React.Fragment>
  );
};

export default App;

last

Explict, Implict 방식 어느 한쪽이든 선호 하는 스타일에 맞게 사용 하면된다.
react. 17이전 버전에서 Explict(명시적)방식이 몇몇 문제가 있어 별도 처리를 해줘야 했지만 18이상에서는 상관없음.
개인적으로 Implict방식 선호