ontainer-presenter構造

プロジェクトを作成する際には、フォルダ構造が重要です.
実務にはパターンと呼ばれる方法が多く存在する.
その中で最も有名なのは
contianer/表現モードと原子モードがあります.

1.コンテナ/表示モード

container、表示モードは、
これは、ソースコードを機能とUIに分割する方法を意味します.
コンテナは機能を担当し、presenterはUIを担当します.
次のReactコンポーネントはcontainerとpresenter構造に分かれています

container、presenterファイルを生成します.以下に示します.

生成後、次のようにコンテナからpresenterをインポートします.

import BoardDetailUI from "./BoardDetail.presenter";
export default function BoardRead() {
  const onClickDelete = () => {
    	...
    };
	return <BoardDetailUI onClickDelete={onClickDelete}/>
}

ここで、デモンストレーション担当者は
動的ルーティング関数や変数の場合と同様に、
次のコードのpropsをパラメータとして使用できます.

export default function BoardDetailUI(props) {
 	return (
    	<button onClick={props.onClickDelete}></div>
    ) 
}

reactでは、propsは親コンポーネントからサブコンポーネントにのみ渡されます.
親コンポーネントと子コンポーネントが双方向にデータを交換できるフレームワークにはAngularがある.
一見、双方向性はよく見えますが、コードを理解するには、2つのコンポーネントを表示する必要があります.
コラボレーションと誤り訂正は一方向よりずっと複雑である.
一方向性は、親から子の順序でコードを読み取り、理解しやすいため、コラボレーションとメンテナンスをより容易にします.

2. CSS in presenter

emotionパッケージを使用してcssをエクスポートしました.以下に示します.

import styled from "@emotion/styled";

export const Button = styled.button`
    color: red
`;

export const Div = styled.div`
    background-color: red
`;

presenter構成部品にインポートして使用するには、次の手順に従います.
効率的な再利用と管理が可能です.

import * as S from "./BoardDetail.styles";

export default function BoardDetailUI(props) {
 	return (
      <S.Div>
    	<S.Button onClick={props.onClickDelete}></S.Button>
      </S.Div>
    ) 
}

感情に投げつける道具

export const Test = styled.div`
  color: ${(props) => (props.isTrue ? 'red' : 'blue')}`

感情的にも上記のコードのようにサポートされています.

3. queries in container

バックエンド・データのコードを要求する別のクエリー・コンポーネントを作成します.
importはcontainerのコードをより簡潔にし、その毒性を高めた.
機能の再利用と修正が簡単になりました.

import { gql } from "@apollo/client";

export const FETCH_BOARD = gql`
    query fetchBoard($boardId: ID!) {
        fetchBoard(boardId: $boardId) {
            _id
            writer
            title
            contents
            youtubeUrl
            likeCount
            dislikeCount
            images
            boardAddress {
                zipcode
                address
                addressDetail
            }
            createdAt
        }
    }
`;

export const DELETE_BOARD = gql`
    mutation deleteBoard($boardId: ID!) {
        deleteBoard(boardId: $boardId)
    }
`;

クエリーは、propsを送信することなく、親コンポーネント上で直接実行できます.

import BoardDetailUI from "./BoardDetail.presenter";
import { useRouter } from "next/router";
import { useQuery, useMutation } from "@apollo/client";
import { FETCH_BOARD, DELETE_BOARD } from "./BoardDetail.queries";

export default function BoardRead() {
  const router = useRouter();
  const [deleteBoard] = useMutation(DELETE_BOARD);
  const { data } = useQuery(FETCH_BOARD, {
    variables: { boardId: router.query.boardId },
  }
	return(<>...</>)
}

4. export vs export default

エクスポートされた構成部品はimportとしてインポートできます.
ここで、export defaultとexportは異なる方法で受け入れるべきです.

exportを使用して複数の関数をエクスポートする場合、

import { useMutation, useQuery } from "@apollo/client"

上のように括弧で囲んでインポートします.
関数が

export defaultとしてエクスポートされた場合、

となります.

import BoardDetailUI from "./BoardDetail.presenter"

上のようにかっこなしでインポートできます.export defaultは、1つの関数のみを送信および受信できます.