[ 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をプロジェクトに直接適用し,両者の違いを明らかにした.

    最後に~!

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