[TIL]2022.10.08

오늘 한 일
벨로퍼트 문서 보기 -- (매일)
드림코딩 + 노마드 리액트 + 패스트캠퍼스 강의 듣기 (매일)
주특기 학습 자료 -- 라우터 & 과제
노마드 실전형 리액트 hook & 리덕스 
인공지능, 컴c, 파이썬 남은거 다 듣고 정리 - 저녁or밤 - 완료


오늘 느낀 것

react-router-dom

src안에 shared 라는 폴더를 생성해주고, 그 안에 Router.js  파일을 생성해줍니다. 그리고 아래 코드를 작성해봅시다.

import React from "react";
// 1. react-router-dom을 사용하기 위해서 아래 API들을 import 합니다.

import { BrowserRouter, Route, Routes } from "react-router-dom";

// 2. Router 라는 함수를 만들고 아래와 같이 작성합니다.

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
      </Routes>
    </BrowserRouter>
  );
};

export default Router;


import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="works" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;



Routes안에 이렇게 작성합니다. 
Route에는 react-router-dom에서 지원하는 props들이 있습니다.

paht는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.

==============
useNavigate

const App = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
}

export default App;

==============
 useLocation

우리는 우리가 현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있습니다. 이 정보들을 이용해서 페이지 안에서 조건부 렌더링에 사용하는 등, 
여러가지 용도로 활용할 수 있습니다.

`**Link` 는 훅이 아니지만, 꼭 알아야 할 API라서 소개합니다.**

`Link` 는 html 태그중에 `a` 태그의 기능을 대체하는 API 입니다. 
**만약 JSX에서 `a` 태그를 사용해야 한다면, 반드시 `Link` 를 사용해서 구현해야 합니다.
** 왜냐하면 `a` 태그를 사용하면  페이지를 이동하면서 브라우저가 새로고침(refresh)되기 때문입니다. 
브라우저가 새로고침 되면 **모든 컴포넌트가 다시 렌더링되야 하고, 또한 우리가 `리덕스`나 `useState`를 통해 메모리상에 구축해놓은 모든 상태값이 초기화** 됩니다. 
이것은 곧 성능에 악역향을 줄 수 있고, 불필요한 움직임입니다.

import React from "react";
import { Link } from "react-router-dom";

const App = () => {
  return <Link to="/contact">Home</Link>;
};

export default App;

- **Dynamic Route란?**
    
    우리는 저번 챕터에서 Router 컴포넌트를 통해서 URL 별로 어떤 컴포넌트로 페이지를  설정하고 직접 구현되는 것을 확인했습니다. 
    
    **이번 챕터에서는 Dynamic Route에 대해서 배웁니다.** 
    
    Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말합니다. 
    
    예를 들어, **works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 해야할까요?

useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅 입니다. 

- **react-router-dom을 통해 Dynamic Route를 설정할 수 있다.**
- **Dynamic Route를 설정할때는 `:id` 로 설정하고, id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.**

 <Route path="works/:id" element={<Works />} />


- HTTP란 무엇일까?
- URI (URL, URN)
- query parameter ( = query string)
- SPA (Sigle page application)
- query parameter, query string, path variable 이란 각각 무엇인가?



리덕스 헷갈린다..

내일 할 일
벨로퍼트 문서 보기 -- (매일)
드림코딩 + 노마드 리액트 + 패스트캠퍼스 강의 듣기 (매일)
주특기 과제