토니랑 Todo 페어프로그래밍 결과에 대해서 꾸준히 리팩토링 하기로 했다! 매주 1~2시간의 시간을 투자할 예정이다.

오늘의 나는 무엇을 새롭게 배웠나요?

[1] react-router-dom 복습

라우팅이란?

• 간단하게 생각 하자면 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것이라고 생각할 수 있다.
• 리액트에서는 라우팅 관련 라이브러리가 많이 있는데, 이중 가장 많이 쓰이는 리액트 라우터(React Router)를 사용해보려 한다.

리액트 라우터

리액트 컴포넌트로 페이지를 나누는 라이브러리.

내부적으로 props를 거치지 않고 데이터를 자식 컴포넌트에게 넘겨줄 때 사용하는 Context를 사용한다.

• package.json이 있는 폴더에서 터미널을 열고

  npm install react-router-dom@6
  # @latest 처럼 version

• **react-router-dom 패키지를 사용할 때 주의할 점! 가끔 react-router-dom 이 아닌 react-router 라는 패키지에서 임포트할 때가 있으니 주의! react-router는 react-router-dom에서 내부적으로 사용하는 것임
  

Router

리액트 라우터에서 사용하는 데이터들을 모두 갖고있다. 현재 주소, 페이지 기록 등의 데이터를 가지고 있다.

• 내부적으로 Context Provider이다
• <BrowserRoter> 가 Context Provider 역할. 따라서 감싸준 컴포넌트들에서 리액트 라우터를 쓸 수 있게 한다.

1. BrowserRouter

   보통 대부분 BrowserRouter를 쓴다. HTML5를 지원하는 브라우저의 주소를 감지 한다. 최상위 컴포넌트에서 BrowserRouter로 컴포넌트 전체를 감싸야 사용 가능하다

2. HashRouter

   해시 주소(http://goddaehee.tistory.com/#test )를 감지 한다.

Routes & Route

• v6 버전부터는 기존의 Route 컴포넌트가 Routes로 변경되었다. Routes는 여러개의 Route를 한번에 관리할 수 있도록 개선되었으며, 보다 세밀한 경로 지정이 가능해졌다.
• 리액트 라우터에서는 routes 안에 있는 route 컴포넌트들을 하나씩 검사하면서 그려줄 컴포넌트를 결정한다.
• React.Fragment처럼 리액트 상에서만 존재하는 컴포넌트. 실제 div 태그 등을 렌더링하지 않는다.
• Route 컴포넌트는 Routes 컴포넌트 내부에서 사용되어야 한다.
• <Route path="주소규칙" element={보여 줄 컴포넌트 JSX} />

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

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
    </Routes>
  );
};

• 중첩 라우팅

  <Routes>
      <Route path="/" element={<Main />}> // 중첩 라우팅
          <Route path="user-management" element={<UserManagement />} />
          <Route path="child-management" element={<ChildManagement />} />
      </Route>
      <Route path="/login" element={<Login />} />
  </Routes>

  // Main.jsx
  <MainWrapper>
        <MainMenu />
        <Outlet /> // children과 같은 효과 ! ✨
  </MainWrapper>

• index props 지정하게되면

  <Route path="course">
    <Route index component={<CoursePage />} /> 
  </Route>

  이런 경우에 "course/" 라는 주소를 입력하면 CoursePage가 나온다. HTML에서 폴더 안에 있는 index.html 같은 역할!
  • path 프롭으로 coursepage를 넣어주면 URL이 “course/coursepage”가 된다.

Link

• Link 컴포넌트를 사용하여 페이지 이동을 처리한다.
• 클릭 시 해당 페이지로 이동하며, 브라우저의 주소가 변경된다.

import { Link } from 'react-router-dom';
<Link to="경로">로그인버튼입니다.</Link>

<a> 태그 대신에 Link를 사용하는 이유

useParams

• custom Hooks
• 동적인 경로를 처리할 때 사용한다.
• Route 컴포넌트에서 path에 :파라미터명을 사용하여 해당 위치에 동적인 값을 받아올 수 있다.
• useParamas가 리턴하는 객체에는 현재 경로의 파라미터들이 저장되어 있다.

//Main.js 최상위 컴포넌트
<Route path=":evaLink" element={<CoursePage />} />

// CousePage 컴포넌트
...
const { evaLink } = useParams();

존재하지 않는 경로 처리하기 with Route exact

<Route path="*" element={<NotFoundPage />} />

• 와일드 카드 *가 의미하는 것은 이 곳에 어떤 텍스트가 들어가도 상관없다는 뜻

Route exact

Route는 경로가 부분적으로 일치하는 컴포넌트도 렌더링하는 특성을 가지고 있ek.

<Route path="/" exact component= { Main } />
<Route path="/water" component= { Water } />
<Route path="/juice" component= { Juice } />

exact이 없을 경우, 경로를 / 로 이동하면 Main, Water, Juice 컴포넌트 3개가 전부 렌더링된다. 의도치 않은 렌더링을 위해 exact를 사용한다.

exact을 사용하면 경로가 완벽히 일치하는 컴포넌트만 렌더링 하게된다.

• switch라는 컴포넌트가 있었는데 v6 부터 지원 XX

공부하면서 어떤 어려움이 있었나요?

1. 진도 조절을 잘 못하고 있는 것 같다. 저번주 weekly에 생각보다 너무 많은 시간을 쏟아서 템포를 잘 맞추지 못했다. 2차 평가 준비를 위해서 몰두해야할 듯하다.

   개인학습과 프로젝트의 적정선을 맞추는 것이 중요한 것 같다.

2. 개발자의 기본 역량, 자질이 무엇인지 고민해봤던 하루였다.

3. JavaScript의 프로토타입이 너무나 어렵다. 오늘 면접스터디에서 케니가 잘 설명(강의ㅋㅋ)해줬지만 잘 모르는 상태로 들으니 너무나 헷갈렸다. 날을 잡고 공부해야할 필요성을 느꼈다.

내일의 나는 무엇을 공부해야 할까요?

• 복습 계획 세우기 + 복습하기
• Styled Component 강의 완강
• 크롬 개발자 도구 확인하기 완강
• 쿠키와 세션, 로컬 스토리지 이해하기 완강
• 모던 CSS 기술 알아보기 완강