[ React ] PJ. Query Parameter、Path parameterを使用してメニューurlを接続する

まず。

この計画を実施するきっかけは次のとおりです.
すなわち、urlを変更し、そのurlのデータを受信するには、メニューをクリックします.
しばらく整理して、
Path parameter
必要な条件のデータまたは単一のデータに関する情報を受信した場合
(精製されていないデータをインポートする場合)
Query string
フィルタ、ソート、検索に適しています

const Aside = () => {
  const [categoryList, setCategoryList] = useState([]);
  const navigate = useNavigate();

  useEffect(() => {
    fetch('http://백엔드IP, AWS')
      .then(res => res.json())
      .then(data => {
        setCategoryList(data.side_info);
      });
  }, []);

  const productList = typeId => {
    const queryString = `products/categories?type_id=${typeId}`;
    navigate(queryString);
  };

  return (
    <div className="aside">
      {categoryList?.map(category => {
        return (
      
                ... 
      
            <Link to={`/products/categories/${category.category_id}/types`} />
            <ul>
              {category.types?.map(types => {
                return (
                  <li
                    onClick={() => {
                      productList(types.type_id);
                    }}
                  >
                  </li>
        
                  ... 

プロジェクトによっては、Path ParameterとQuery Stringを適用します.
そのため、論理は少し複雑に見えます.

1.Aside接続

남성복, 여성복 같은 나열된 리스트를 거쳐가는 것이 아닌 단독적인 페이지에는 패스파라미터를 적용.

여러 항목이 리스트가 되어 단독적으로 보이지 않는 페이지에는 쿼리스트링을 적용.

受信したデータ値は、バックエンドと通信することによって、各エントリの指定urlに渡される.

男性服にはリストに存在するデータが入るので、リストのキー値をサブとして渡します.

パスパラメータをリンクに適用し、navideを使用してクエリー・リストをリンクに適用します.

Query Stringを使用して、onClickイベントを(サイドカテゴリ)の各アイテムに適用します.

押下された項目のid値を関数のパラメータとして渡す.

urlにbackticを適用した後、テンプレート文字をパラメータとして渡す値を入力します.

変数に割り当て、userNavigateを使用してURLを渡します.

2.データの抽出

2-1. Path parameterを使用して各プロジェクトのurl接続を実現

Fetch関数はデフォルトGETで動作し、オプションパラメータは必要ありません

入力されたurlによってurlに一致するデータを受信し、ページを実現します.

パスパラメータはuserParams Hookを使用して必要な値を取得します.

const Mens = () => {
  const [mensList, setMensList] = useState();
  const params = useParams();
  const navigate = useNavigate();

  
  
   const API_URL = `http://백엔드 IP, AWS/products/categories/${params.id}/types`;
  
  
  useEffect(() => {
    fetch(`${API_URL}`)
      .then(res => res.json())
      .then(res => {
        setMensList(res.message);
      });
  }, [params.id]);

   ...
   

2-2. Query Stringによる各項目のURL接続

入力されたurlによってurlに一致するデータを受信し、ページを実現します.

クエリはuserLocation Hookを使用して必要な値をフィルタし、GETを取得します.

const List = () => {
  const [products, setProducts] = useState([]);
  const location = useLocation();

  const API_URL = `http://백엔드 IP, AWS/products/categories${location.search}`;

  useEffect(() => {
    fetch(`${API_URL}`)
      .then(res => res.json())
      .then(data => {
        setProducts(data.message);
    }
  }, [location.search]);
    
    ...

せいちょうてん

path parameterとquery stringをプロジェクトに直接適用し,両者の違いを明らかにした.

最後に~!

< 개똥이는 오늘도 성장한다 ! >