[TIL]9月8日ファイルのコンポーネント化

反応の最大の利点は、各元素を組み合わせることである.
スタイルを読み込むか、ページ全体を読み込むか、ページに基づいて内容を読み込み、ページに基づいて内容を記入できます.
既存のフォルダ構造を(container/presenter)構造に変更する内容に基づいて実践した.
1ページに2ページ作成(登録または変更)
既存のポートフォリオ課題で登録ページを実現した.

このページと同じレイアウトの[修正](Modify)ページも作成する必要があります.
reactionでない場合は、既存のコードをコピーして貼り付けたボタンで変更し、reactionを使用してページを読み込むだけで、いくつかの変更を変更するだけで2つのページを生成します.
フォルダ構造

まず、登録ページのフォルダ構造からsrc>コンポーネント>commons>units>board>write部分にマージします.
このように構成されたファイルはindexです.jsファイル登録ページのインポートが実現しました.

変更の実装
「変更」ページは「登録」ページと同じですが、内容は少し変更されています.

上部でページタイトル、下部のボタンを変更するだけです.
[登録]ページと同じフォルダを作成します.

[BoardsDetailPage]にeditというフォルダを作成し、page indexを変更します.jsファイルが作成されました.
このようにフォルダ構造を作成するのは、「詳細ビュー」ページに登録されている投稿のID値を記憶し、そのページに来るため、フォルダ構造が作成されます.
△明日、先生に聞いてみなければなりません.
今は登録と同じようにインポートすればいいです.

同じインポート後に完了するタスクがあります.
importは同じページなので、名前とボタンを変更する必要がありますが、関数を定義して機能する必要があります.
isEdit={false}はこのように定義されています.
isEditにfalse値がある場合は、名前とボタンを「変更」ページに変更する必要があります.
このため、isEditは「登録」ページでも宣言されます.

isEdit={true}も「このセクションを登録」ページで宣言されています.
isEdit=trueの値の場合、関数を宣言して「登録」ページに移動します.
これで、writeフォルダのcontainer、presentを変更するだけで、2つのページ:1つのコンポーネントページを完了できます.
container page
containerページでは、2種類設定するだけです.
親フォルダにisEditという関数が設定されているので、ここではpropsとして関数をインポートし、現在のページにエクスポートする必要があります.


propsを定義し、isEdit={props.isEdit}を定義すればよい.
present page


まず、前ページのタイトル部分は以下のようになります.

<FormTitle>{props.isEdit ? "게시물 등록" : "게시물 수정"}</FormTitle>

props.isEditがtrue値の場合、「投稿の登録」
props.isEditがfalse値の場合、「投稿の変更」
これで記入すればいいです.
ではindexjsが記入したtrue値とfalse値を見つけ、ページを対応する値に描画します.
裾ボタン部分が少し違います.

{!props.isEdit &&<FooterBtn1 onClick={props.onClickModifyBtn} check={props.check}>수정하기<FooterBtn1>
{props.isEdit &&<FooterBtn1 onClick={props.onClickRegister} check={props.check}>등록하기<FooterBtn1>

同様にtrue値、false値変更ボタン、登録ボタンを選択してページを描画します.
ラベル全体を囲むのは、それぞれ異なるクリック関数を実現しているためかもしれません.
△この部分は明日指導者に聞きます.
😮‍💨 実习の时の感じ...
大間違い
実習中に間違いが本当に多かった.
主にエラーの場合、フォルダ構造の設定、gqlクエリにカッコが欠けている、スペルエラーなどがある可能性があります.
フォルダ構造も簡単だと思いますが、フォルダ構造を正確に理解すべきだと思います.gqlクエリの作成部分は単語だけでなく、括弧も見るべきではありません.(gqlerrorはほとんど括弧の問題です...)