[TIL]주특기숙련_Day22

22.08.01 월요일

🗓할일

CS 스터디 리뷰
React 라우팅 공부하기 ~~
~~알고리즘 2문제 풀기 ~~
~~TIL 쓰기

🚀 TIL

Redux 데이터 초기화 이유

링크

라우팅

react-router-dom 패키지를 사용하여 페이지 이동을 구현할 수 있다.

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
{/* Routes안에 이렇게 작성합니다. 
Route에는 react-router-dom에서 지원하는 props들이 있습니다.
paht는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.*/}
        <Route path="/" element={<Home />} />
 
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

react-router-dom Hooks
공식문서

1. useNavigate
   버튼의 클릭 이벤트 핸들러에 아래와 같이 코드를 작성하면 버튼을 클릭했을 때 우리가 보내고자 하는 path로 페이지를 이동시킬 수 있습니다. 꼭 버튼이 아니더라도, 컴포넌트의 클릭 이벤트 핸들러를 통해서 활용할 수 있습니다.

import { Navigate, useNavigate } from "react-router-dom";

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

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

export default App;

2. useLocation
   공식문서

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

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

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

export default App;

알고리즘

[Programmers] 콜라츠 추측- JS
[Programmers] 하샤드 수- JS

💬

오늘 라우팅 강의를 듣고 과제를 했다 어떻게 작동하는지 이해는 되는데 또 과제에 적용하려면 어렵다
그리고 오늘 기술매니저님 주도하에 짝코딩을 했다 내 화면을 공유해 다 같이 코드를 짯다
나는 내가 직접 치기도 해서 그런지 확실이 이해가 잘됬다 그리고 끝나고 같이 들었던 팀원들끼리 복습했다 아직도 헷갈리는게 있지만 지난주보다 훨씬 나은게 보인다
기술매니저님이 실력은 계단처럼 상승할꺼라고 했는데 늦어도 좋으니 나아졌으면 좋겠다.