라우팅

장점

1. 보기 쉽고 익숙하다.

2. 더욱 높은 활용도

 

컴포넌트

 

프로젝트 생성

npm init react-app book-react

 

라우팅: 경로를 의미하는 Route와 진행을 뜻하는 ing가 합쳐진 단어로, '경로를 지정하는 과정' 의미, 페이지 라우팅은 요청에 따라 적절한 페이지를 반환하는 일련의 과정

 

리액트 라우터 설치(프로젝트 설정 후0

npm i react-router-dom

 

실행 방법

npm start

 

프로젝트에 라우터 적용하기

리액트 라우터가 제공하는 BrowserRouter컴포넌트로 App을 감싼다.

import { BrowserRouter } from 'react-router-dom';

root.render(

  /*<React.StrictMode>

    <App />

  </React.StrictMode>*/

  <BrowserRouter>

    <App/>

  </BrowserRouter>

);

 

book-react1

경로 설정, route, link to

 

이벤트를 사용할 때 주의 사항

이벤트 이름은 카멜 표기법으로 작성

이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달

DOM요소에만 이벤트를 설정

 

keycode===13은 엔터

 

const App =() => {

  const [book, setBook] = useState(books);

 

  const onDelete=(targetId)=>{

    setBook(book.filter((it)=>it.id !== targetId))

  }

  return (

    <div className="App">

      {/**리액트 라우터로 페이지 라우팅을 구현하는 앱에서는 Link라는 컴포넌트를 이용한다.

       * <Link to='이동할 경로'>링크 이름</Link>

       */}

       <div className='Nav'>

        <Link to={"/"}>Home</Link>

        <Link to={"/add"}>Add</Link>

        <Link to={"/list"}>List</Link>

       </div>

      <Routes>

        {/*현재 URL 경로에 맞게 적절할 Route 컴포넌트를 페이지에 랜더링한다. */}

        <Route path="/" element={<Home/>}/>

        <Route path="/add" element={<Add />}/>

        <Route path ="/list" element={<List book={book} onDelete={onDelete} />}/>

      </Routes>

    </div>

  );

}