TIL 20211128[第9974便]

合成ボタンを適用してアクティブ化

[カードを追加](Add Card)画面では、無効になっている場合にのみウィザード文字が表示されます.有効にするとウィザード文字は消え、合成が完了します->設計者の要求に応じて合成ボタンを有効にします

// 제목, 설명, 태그가 모두 작성되야 활성화가 된다는 의미
 const activation = title !== '' && desc !== '' && tagsStr !== '';
 
 // activation이 false일 경우 즉, 비활성화일 경우 가이드 문구가 보임
  {!activation && (
        <div style={{ display: 'flex', marginBottom: '12px' }}>
          <div style={{ marginRight: '16px' }}>
            <InfoLight />
          </div>
          <Text regular20 color={ColorStyle.PrimaryPurple}>
            다른 사람이 Tap! 할 수 있게 제목, 소개글, 태그를 작성해서 프로젝트를
            소개 해보세요
          </Text>
        </div>
      )}
      
     ...생략...
     
          <AddBtn
              onClick={addCardBack}
              activation={activation}
            >
              <Text
                bold20
                color={activation ? ColorStyle.PrimaryPurple : ColorStyle.Gray300}
              >
                작성 완료
              </Text>
            </AddBtn>
    
     ...생략...

const AddBtn = styled.div`
  width: 111px;
  height: 50px;
  border-radius: 30px;
  border: 1px solid
  // components의 props인 activation을 전달받아서 사용! 
    ${({ activation }) =>
      activation ? ColorStyle.PrimaryPurple : ColorStyle.Gray300};
  font-size: ${FontScale.Body1_20};
  font-family: ${FontFamily};
  font-weight: 700;
  margin-right: 36px;
  margin-bottom: 40px;
  background: ${ColorStyle.BackGround300};
  p {
    cursor: pointer;
    text-align: center;
    line-height: 50px;
  }
  &:hover {
    background-color: ${({ activation }) =>
      activation ? ColorStyle.PrimaryPurple : ColorStyle.BackGround300};
    border: 1px solid
      ${({ activation }) =>
        activation ? ColorStyle.PrimaryPurple : ColorStyle.Gray300};
    transition: 0.3s;
    p {
      color: ${({ activation }) =>
        activation ? ColorStyle.Gray500 : ColorStyle.Gray300};
    }
  }

条件付き造形:styled-conntsはコンポーネントの道具を受け入れて使用することができます.テンプレートライブラリでJavaScriptを使用するのと同じ形式で、内部で宣言された関数はpropsをパラメータとして実行されます.
上図に示すように、ガイド文字はすべての必要事項を完了すると消え、作成を完了することができる.

ページプロファイルurlの変更

元はpath=「/edit」で、プロファイルを変更するuserIdを追加してurlに入ります.

// App.js
   <PrivateRoute
       path="/mypage/:userId/edit"
       component={CardEdit}
       exact
    />

// cardEdit pages
import { useParams } from 'react-router-dom';

 const params = useParams();
 const userId = params.userId;

userParamsは、思ったよりも簡単に対応するuserId値を加えています.😆
上記の図に示すように、プロファイルの変更ページurlには、18というuserId値が中央に表示されます.

useparamsとは?

ルータのAPIに応答して、useparamsはURLパラメータのキー/値ペアオブジェクトを返します.現在の一致.paramsへのアクセスに使用します.

React Routerキーコンポーネント

React Routerには3つの基本カテゴリのコンポーネントがあります.

<BrowserRouter>および<HashRouter>などのルータ

|パスマッチング

<Route>および<Switch>

およびナビゲーション(例えば<Link>、<NavLink>および<Redirect>)

また、ナビゲーションコンポーネントをルーティングコンバータと見なします.Webアプリケーションで使用されるすべてのコンポーネントはreact-router-domからインポートする必要があります.(以下のimportコードを参照)

import { BrowserRouter, Route, Link } from "react-router-dom";

ルーターとは?

すべてのReact Routerアプリケーションのコアには、ルータコンポーネントが必要です.Webプロジェクトの場合、react-router-domは<BrowserRouter>および<HashRouter>ルータを提供します.両者の主な違いは,URLの格納とWebサーバとの通信方式である.

A<BrowserRouter>は、通常のURLパスを使用します.通常は見やすいURLですが、サーバーを正しく構成する必要があります.特に、Webサーバは、クライアントがReact Routerによって管理するすべてのURLに同じページを提供する必要があります.Create Resact Appは、開発段階ですぐにサポートを提供し、本番サーバの構成方法について説明します.<HashRouter>現在位置をURLのハッシュ部分に格納するので、URLはhttp://example.com/#/your/pageわあ。に類似する.ハッシュはサーバに送信されないため、特別なサーバ構成は必要ありません.
ルータを使用するには、要素階層のルートでレンダリングされていることを確認します.通常、ルーターに最上位の要素をパッケージします:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

P.S.注意:
https://v5.reactrouter.com/web/api/Hooks/useparams
https://v5.reactrouter.com/web/guides/primary-components
https://dkje.github.io/2020/10/13/StyledComponents/
今日はstyled-componsesがpropsに渡す条件付き造形を学び、urlにuserId値を加えながら、正式なドキュメントでルータを学びました.😀