💣 Next.js_02 Dynamic Routes, next/link

28627 ワード
next.js テキストリンク

Next.js


Anma Nextをエンコードします。講義.

🔪 axios


axios

  • 呼APIaxiosインストール
    • $ npm i axios
    import Axios from "axios";
import Head from "next/head";
import { useEffect } from "react";

export default function Home() {
  const API_URL =
    "http://makeup-api.herokuapp.com/api/v1/products.json?brand=maybelline";

  // 최초에 진입했을 때 데이터 호출을 위한 함수
  function getData() {
    Axios.get(API_URL).then((res) => {
      // API 호출이 잘 되는지 확인
      console.log(res);
    });
  }

  // 최초에 진입했을 때 한 번만 호출하면 되므로 useEffect 사용
  useEffect(() => {
    getData();
  }, []);

  return (
    <div>
      <Head>
        <title>Home | 보리구리</title>
      </Head>
    </div>
  );
}
  • APIコール確認

    • 🔪 useEffect


    userEffectを使用して、マウント/アンロード/更新時に実行するアクションを設定します。

  • useEffectの利用
  • 素子装着時(初出現時)
  • アンインストール時(消失時)
  • 更新時(特定props変更時)
    • 特定の仕事をこなすことができる.
    import React, { useEffect } from 'react';

function User({ user }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  • useEffect最初のパラメータ:関数
  • useEffect2番目のパラメータ:依存値を含む配列(deps)

    • マウント操作

  • props受信値を素子のローカル状態
    • に設定
  • 外部API要求(REST API等)
  • 使用ライブラリ(D 3、ビデオ.jsなど)
  • setInterval/通過setTimeout|重複タスクのスケジュール

    • アンインストール操作

  • setInterval,setTimeout使用登録タスクclear(clearInterval,clearTimeout)
  • ライブラリインスタンスの削除

    • deps


  • 空の配列:最初の呼び出し関数のみ

  • 特定の値を入力
  • 1回目の素子装着時に呼び出し、指定値変更時に呼び出し
  • depsで特定の値がある場合、アンインストール時に呼び出され、値が変更される前に
    • が呼び出されます.
  • useEffect内で使用しますが、propsがあればuseEffectのdepsに入れます.(ルール)

  • パラメータをスキップ
  • depsパラメータが省略されている場合は、要素を再レンダリングするたびに
    • が呼び出されます.

    🔪 useState


    useStateによる構成部品の置換値の管理
    反応16.8以前のバージョンでは、関数型素子は状態を管理できなかったが、反応16.8にHooks機能が導入されるにつれて、関数型素子も状態を管理できるようになった.

    イベントの設定

  • Counterのボタンでクリックイベントが発生した場合、特定の関数を呼び出すように設定
    • import React from 'react';

function Counter() {
  const onIncrease = () => {
    console.log('+1');
  }
  const onDecrease = () => {
    console.log('-1');
  }
  
  return (
    <div>
      <h1>0</h1>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
  );
}

export default Counter;

    useState

  • 動的値=ステータス
  • useState関数によって構成部品の状態を管理できる
    • import React, { useState } from 'react';
// 리액트 패키지에서 useState 함수를 불러옴

function Counter() {
  const [number, setNumber] = useState(0);
  // number : 현재 상태(첫 번째 원소)
  // setNumber : Setter 함수(두 번째 원소)
  // Setter 함수 : 파라미터로 전달받은 값을 최신 상태로 설정
  
  const onIncrease = () => {
    setNumber(number + 1);
  }
  const onDecrease = () => {
    setNumber(number - 1);
  }
  
  return (
    <div>
      <h1>{number}</h1>
        <button onClick={onIncrease}>+1</button>
        <button onClick={onDecrease}>-1</button>
      </div>
  );
}

export default Counter;

    🔪 Dynamic Routes

  • ファイル名に括弧[]のjsファイルを作成
  • /post/1、/post/abcなど同じURLに接続すると、pages/post/[pid].jsページに移動します.
  • [pid]パスが1かabcかを取得し、
    • を使用します.
    import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

    🔪 next/link

  • <a>用法と同じ
    • import Link from 'next/link'

function Home() {
  return (
    <ul>
      <li>
        <Link href="/">
          <a>Home</a>
        </Link>
      </li>
      <li>
        <Link href="/about">
          <a>About Us</a>
        </Link>
      </li>
    </ul>
  )
}

export default Home
  • <a>を囲む基準要素であれば、<Link>はpassHref属性を必要とする.
    =>styled-componsesのようなライブラリを使用する場合、passHrefには属性がありません.<a>にはhrefの属性はありません.
  • FuturamapassHref属性に追加されていません<a>機能しません
    =>クラスを<a>に追加することで、スタイル解決を指定します.カスタム構成部品を使用しません
    • import Link from 'next/link'
import styled from 'styled-components'

function NavLink({ href, name }) {
  // passHref속성을 Link에 추가
  return (
    <Link href={href} passHref>
      <RedLink>{name}</RedLink>
    </Link>
  )
}

export default NavLink

// <a>를 감싸는 커스텀 컴포넌스가 생성
const RedLink = styled.a`
  color: red;
`

    🔪 next/router


    |使用
  • <Link>ではなくnext/routerリンクページ
    • を使用
    |使用
  • next/routerアクセスパス名およびレンダリングコンポーネント
    • import { useRouter } from "next/router";
import { Menu } from "semantic-ui-react";

export default function Gnb() {
  const router = useRouter();
  let activeItem = "home";

  if (router.pathname === "/") {
    activeItem = "home";
  } else if (router.pathname === "/about") {
    activeItem = "about";
  }

  function golink(e, data) {
    if (data.name === "home") {
      router.push("/");
    } else if (data.name === "about") {
      router.push("/about");
    }
  }

  return (
    <div>
      <Menu inverted>
        <Menu.Item
          name="home"
          active={activeItem === "home"}
          onClick={golink}
        />
        <Menu.Item
          name="about"
          active={activeItem === "about"}
          onClick={golink}
        />
      </Menu>
    </div>
  );
}

    なぜnext/linkまたはnext/routerを使用するのですか?

  • <a> , location.href=>ページが更新されて移動します
    =>ページが再描画されます.=要求がどんどん増える
    =>単一ページアプリケーションのメリットの消失
  • next/link , next/router=>ページはそのままで、中身だけを変更します.
    • 【初学者】【5分で終了】Railsアプリケーションでフォントを変更する方法。
    閉パケットを伝達するwarshallアルゴリズムを求めます