Typescript #3 react-Declaration function

Arrow function

import React from 'react';

type GreetingsProps = {
	name: string;
}

const Greetings : React.FC<GreetingsProps> = ({name}) => {
	return <p>{name}</p>
}

Arrow関数の利点

道具にはもう子供がいます.type aliasでは,別途の音明子タイプを必要とせずに使用できる.下のように!

import React from 'react';

type GreetingsProps = {
	name: string;
  	// children: React.ReactNode // 이미 탑재되어 있음!
}

const Greetings : React.FC<GreetingsProps> = ({name, children}) => {
	return (
      <p>hello {name}</p>
      {children}
    )
}

Arrow関数を使用する場合のデメリット

defaultPropsを使用してデフォルト値を設定できません.ただし、この部分はpropsの構造分解割当部分でデフォルト値を設定すればよい.

import React from 'react';

type GreetingsProps = {
  name: string;
  mark?: string; // 👏 물음표를 붙여줬기 때문에 해당 컴포넌트를 쓰는 부분에서 props로 mark를 주지 않아도 된다.
};

const Greetings: React.FC<GreetingsProps> = ({ name, mark = '!' }) => {
  return (
    <p>
      hello {name} {mark}
    </p>
  );
};

export default Greetings;

通常の関数キーとしてarrow関数ではなくdefaultPropsを使用して正常に動作します.

arrow functionでdefaultPropsをfunctionキーワードとして使用する

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string; // 👏 물음표를 function키워드에서는 붙여주지 않아도 된다.
  children?: React.ReactNode // 👏 만약 children을 사용한다면 설정을 해줘야 함!
};

function Greetings({ name, mark, children }: GreetingsProps) {
  return (
    <p>
      hello {name} {mark}
    </p>
  );
}

Greetings.defaultProps = {
  mark: '!',
};

export default Greetings;

functionキーワードを使用するには、子供たちに個別に設定する必要があります.ただし、各構成部品にはサブアイテムのある構成部品と、サブアイテムのない構成部品があり、Arrow Functionから復元されます.FCを使うときは必ず子供がいます.これは不便をもたらすかもしれません.
🧑🏼‍💻 結論:子供を選択的に使用できる関数キーワードを使用します.

伝達関数イベント(functionキーワード)

App.tsx

import React from 'react';
import Greetings from './Greetings';

function App() {
  const OnClickGreeting = (name: string) => {
    console.log(`hi ${name}`);
  };
  return (
    <div className='App'>
      <Greetings name='taejoon' onClick={OnClickGreeting} />
    </div>
  );
}

export default App;

Greetings.tsx

import React from 'react';

type GreetingsProps = {
  name: string;
  mark: string;
  onClick: (name: string) => void;
};

function Greetings({ name, mark, onClick }: GreetingsProps) {
  const handleClick = () => {
    onClick(name);
  };

  return (
    <>
      <p>
        hello {name} {mark}
      </p>
      <button onClick={handleClick}>hi</button>
    </>
  );
}

Greetings.defaultProps = {
  mark: '!',
};

export default Greetings;

整理する

reactionではarrow functionよりfunctionキーワードを使います!

様々な利点から,矢印関数を用いるよりも反応器に関数キーワードを用いる方がよい.外観は関数キーと矢印関数を一緒に使用するのはよくありませんが、構成部品を定義するときに関数キーを使用する外観だけは悪くないようです.彼が実際の授業で混用している様子を見ると、悪くないはずだ.

名のお子様をお選びいただけます!

defaultPropsを正常に使用できます!

応答からタイプスクリプトを書き込む利点

開発自体が便利!コンポーネントを使用するときにpropsがうっかり漏れてしまった場合は、マウスを動かして、何を入れるべきかを知ることができます.あるいはctrl+spaceだけを使っても、どんな道具を置くか、どんな道具を置くかを教えてくれます.