React Functional Component

関数要素は、上記コードガイド合宿中に2番目の項目が行われたときに初めて遭遇する要素である.クラスコンポーネントを使用してプロジェクトを作成し、プロジェクトの成果物を作成するのに忙しかったので、私が学んだ新しい概念を適用する時間がありませんでした.
その後,関数型素子の学習を開始した.

構成部品の作成

function App() {
	return(
  	<div>
  	   내용
  	</div>
)
}

以上は基本的にCRAによるプロジェクト作成時に見られるアプリケーションです.jsの構造.
上の内容です.

const App = () => {
	return(
    	<div>
          내용
        </div>
    )
}

矢印関数で表すこともできます.
それ以外に、サブコンポーネントpropsにデータを渡す方法は同じです.
たとえば、アプリケーションコンポーネントとMyapコンポーネントの間のコンテンツをMyapコンポーネントに渡す場合は、

--App.js
const App = () => {
	return(
    	<Myapp>
          내용
        </Myapp>
    )
}

--Myapp.js
const Myapp = (props) => {
  const {children} = props;
  //비구조화 할당
	return(
      {children}
    )
}

上記コードに示すように、Myapコンポーネントを画面上に配置すると、
結果は「コンテンツ」と同じになります.

useState

Hooksが現れ、関数型要素の花と呼ぶことができます.
最も基本的な管理構成部品ステータスのユーザーステータス.

const [test,setTest] = useState('');

以上のコードを説明するには、
...空の文字列をvalueに設定し、キー値をstateにします.
この値を変更するには、setTestというsetter関数を使用します.
という意味です.
もし誰かがこの文章を読んだら、私の理解の正しさを指摘しなければならない.

適用

const [message, setMessage] = useState("");

const onMouseEnter = () => setMessage("안녕하세요!!");
const onMouseLeave = () => setMessage("안녕히가세요!!");

<h1>{message}</h1>

<button onClick={onMouseEnter}>입장</button>
<button onClick={onMouseLeave}>퇴장</button>

これはベロフト先生の「反応を処理する技術」の例です.(こう書いていいかわからない)
メッセージという名前のキー値に初めて空の文字列値を指定し、ボタンを押すとsetter関数を呼び出し、変更する値をパラメータとして関数に入れます.
そのため、ボタンを押すたびに、そのボタンに接続された関数がインポートされたメッセージに置き換えられ、画面に表示されます.

フォントの色を変えたのはです
フォントの色を管理するstateを作成します.
私はあなたをこのようにすることができます.
しかし、このように各ボタンはsetter関数を呼び出してstateを変更する必要があるが、このプロセスを減らす方法があるかどうかはさらに学ぶ必要がある.

今日一日。

生活様式がすっかり怠惰になった.夜明けは遅くまで寝て、午前11時ごろ起きて、ゴロゴロして、お風呂に入って、ご飯を食べ終わって、時間があっという間に過ぎました.多くのお金を使ってコードを学んで無色になって、本当の良い同期に出会って無色になって、コードに興味を失ったようで、私が逃した部分が何なのかをもう一度思い出して、勉強を始めたいと思っています.心の中ではあまりにも最初から始まったのではないかと思い、早く就職して月給を取りたいという思いもあり、どこから始めたのかは分からないが、今決意して再開したのは何なのか、という気持ちで自己合理化していきます.
明日は活動ハンドリングを勉強します.