💣 Next.js_02 Dynamic Routes, next/link

Bori·2022년 1월 2일

next.js

Next.js

목록 보기

2/13

Next.js

코딩앙마 Next.js 강의를 보고 정리한 내용입니다.

🔪 `axios`

`axios`

API 호출을 하기 위해 axios 설치

$ 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

useEffect를 사용하여 마운트/언마운트/업데이트시 할 작업 설정하기

useEffect를 이용하여
- 컴포넌트가 마운트 됐을 때(처음 나타났을 때)
- 언마운트 됐을 때(사라질 때)
- 업데이트 되었을 때(특정 props가 바뀔 때)
특정 작업을 처리할 수 있다.

import React, { useEffect } from 'react';

function User({ user }) {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);

useEffect 첫 번째 파라미터 : 함수
useEffect 두 번째 파라미터 : 의존값이 들어있는 배열 (deps)

마운트 시 하는 작업들

props로 받은 값을 컴포넌트의 로컬 상태로 설정
외부 API 요청 (REST API 등)
라이브러리 사용 (D3, Video.js 등)
setInterval을 통한 반복작업 또는 setTimeout을 통한 작업 예약

언마운트 시 하는 작업

setInterval, setTimeout을 사용하여 등록한 작업들 clear하기 (clearInterval, clearTimeout)
라이브러리 인스턴스 제거

deps

빈 배열 : 처음에 한 번만 함수 호출
특정 값 넣기
- 컴포넌트가 처음 마운트 될 때 호출이 되고, 지정한 값이 바뀔 때에도 호출
- 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

동적인 값 = 상태(state)
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-components 같은 라이브러리를 사용할 경우, passHref 속성이 없다면 <a>는 href속성을 가질 수 없게 된다.
- Futurama 만들 때 passHref속성에 추가하지 않아 <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
=> 페이지가 새로고침 되면서 이동
=> 페이지가 새로 그려진다. = 요청이 늘어남
=> SPA(Single Page Application)의 장점이 사라짐
next/link, next/router
=> 페이지는 그대로 있으면서 안의 내용들만 바뀐다.