復習する前に。

反応の基礎を始めてからもう3日になりました.今日はReactの基礎文法を学び,Routerを用いてSPAを実現し,StateとPropsのイベント処理関数を用いてSNSの基本動作を実現する.今回のブログでは、今日行われた課題に含まれる文法、概念を振り返り始めました.

npmのインストール

コードstaitsではgit hubを用いてジョブをコミットする方法があるが,node package manager npmを用いてコードの正解確認とコミットを行う方法もある.本課題はnpmで行われるので、課題を行う前にnpm installを入力端末にnpmインストールを指令する.

react-router-domのインストール

以前にspa部分の予習でまとめた内容に含まれていたrouter関連のコンポーネントを使用するために,課題開始前に端末にnpm i react-router-domコマンドを入力してインストールする.

課題目標

下図の左側の部分では、routerを使用して3つのアイコンにspaを実装し、上部にユーザー名とtweetコンテンツを作成し、「tweet」ボタンを押して、作成したユーザー名とtweetコンテンツを次のtweetリストに追加する方法を実装します.

アイコンの追加

https://fontawesome.com/iconsページに登録して、本当にいろいろなアイコンを無料で提供します.インポートできるコードタイプはHTML、React、Vueです.jsで提供します.

利用する

複数人がアップロードした情報のリストをリストする場合、重複する情報を同じフォーマットでアップロードするので、propsを使用するのが有効な方法であると理解しています.

propsは、親コンポーネントから子コンポーネントに渡され、結果値が得られる.

親構成部品は子構成部品をインポートし、子構成部品は親構成部品をインポートします.

{tweetUpdate.map(tweet => <Tweet tweet={tweet} /> )}

上のコードでは、Tweetはpropsを伝達するサブコンポーネントであり、その後のtweet={tweet}はサブコンポーネントに伝達するpropsである.また、propsがサブコンポーネントにオブジェクトとして渡されることを覚えておいてください.

const Tweet = ({ tweet }) => {컴포넌트 내용}

第

コードにおいて、要素のパラメータ値{tweet}として、サブ要素端から受信された親要素からのpropsが確認される.このパラメータ値はオブジェクトとして存在します.

<div className="tweet__message">
          {tweet.content}
        </div>

オブジェクトとして渡されるパラメータ値tweetは、上記のコードのように、{}のカッコおよびオブジェクト呼び出しフォーマットを使用して、必要なオブジェクトの値をロードすることができる.

const obj = {key : 'value',}

たとえば、上のobjオブジェクトが上のtweetパラメータ値に渡されたと思う場合は、divというtextcontent値に「value」という文字列を次の方法でロードできます.

<div>{obj.key}</div>

の結果、パラメータ値として渡されたオブジェクトを使用してサブコンポーネント内で反映が完了すると、親要素呼び出しの場所が返されます.

stateプロパティとイベントハンドラ関数の使用

stateプロパティを使用するには、useState要素をimportにロードする必要があります.

import { useState } from "react";

の下にロードされたuseStateの値は、usernameがsetIsUsername関数によって変化した値であり、useStateのパラメータ値であるhskimがusernameの初期値である変数に入れて使用される.

const Tweets = () => {
  const [username, setIsUsername] = useState('hskim');

上の変数がどのように使用されているかを見てみましょう.

の下のコードには、buttonのラベルにこのボタンをクリックして生成されたonClickイベント属性が含まれており、クリックイベントが発生したときにButtonClick関数が呼び出される.

<button onClick={ButtonClick}>Tweet</button>

で呼び出されたButtonClick関数はどのようなものですか.

本来使用されていたコードは以下のようには示されていないが、コードの露出が懸念されるため、説明にのみ使用されるコードに変更された.次のButtonClick関数が呼び出されると、setIsUsernameという現在の値を変更する関数が呼び出され、現在の値はパラメータ値stateの値に置き換えられます.たとえば、チェックボックスマークのパラメータ値がevent.target.anyの場合、現在の値はevent.target.checkedまたはtrueのブール値に変更されます.

const ButtonClick = (event) => {
    setIsUsername(event.target.any);
  };