리액트 // shouldComponentUpdate / react-router-dom / 페이지이동 Link to

Web/ReactJS

리액트 // shouldComponentUpdate / react-router-dom / 페이지이동 Link to

Jaybon 2020. 7. 27. 17:30

연산을 줄이기 위해 리스트가 바뀌었는지 확인.

같으면 업데이트x

다르면 업데이트o

--------------

push pop 쓰지말것

-------------

새로

rcc 엔터

public의 index.html 에

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

넣고

App.js

import React, { Component } from "react";

class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand-md bg-dark navbar-dark">
          <a className="navbar-brand" href="#">
            Navbar
          </a>
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#collapsibleNavbar"
          >
            <span className="navbar-toggler-icon"></span>
          </button>
          <div className="collapse navbar-collapse" id="collapsibleNavbar">
            <ul className="navbar-nav">
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
              <li className="nav-item">
                <a className="nav-link" href="#">
                  Link
                </a>
              </li>
            </ul>
          </div>
        </nav>
        <br />
      </div>
    );
  }
}

export default App;

또는 nav를 컴포넌트 또는 함수형 컴포넌트로 만들어서 App.js에 집어넣자

-----------------

Next.js 꼭 써보자

----------------

리액트는 하이퍼링크 (a태그)를 쓰지 못한다.

그래서 라우터를 사용해야한다.

SPA 싱글 페이지 애플리케이션

리액트는 싱글페이지이다.

아래 라이브러리를 사용하자.