개인과제 (인증서비스 팬레터함 1)

• react-router-dom 을 이용하여 로그인화면, 홈화면과 상세화면, 프로필 화면에 대한 라우터 설정을 해주세요.
• 로그인과 프로필 화면은 우선 이름만 있는 빈 컴포넌트를 만들어서 셋업합니다.
• 로그인 상태인 경우만 홈, 상세, 프로필 화면에 접근할 수 있고, 로그아웃 상태에서는 로그인 화면에만 접근할 수 있게 해주세요. (로그인 상태는 우선 임시로 만들어두시면 됩니다.)
• 기존의 redux를 @reduxjs/toolkit 으로 변경합니다.

이런식으로 순서대로 진행했다. 

 

우선 로그인화면, 홈화면, 상세화면, 프로필하면에 라우터 설정을 해줘야했는데 

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

이런식으로 외웠기때문에 이걸 토대로

export default function Router() {

  return (

    <BrowserRouter>

      <Routes>

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

        <Route path="/detail/:id" element={<Detail />/>

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

        <Route path="/Profile" element={<Profile />/>

        <Route path="*" element={<Navigate replace to="/" />} />

      </Routes>

    </BrowserRouter>

  );

이런식으로 만들었다. 

라우터 설정을 하는 주된 이유론 몇가지가 있는데, 

1. 다중 페이지 애플리케이션(MPA)을 구현하는 데 도움: React 애플리케이션은 기본적으로 단일 페이지 애플리케이션(SPA)이기 때문에, 여러 페이지를 다루기 위해 라우터를 사용함. 라우터를 사용하면 사용자가 다른 URL로 이동할 때마다 새로운 컴포넌트를 렌더링하여 다른 페이지로 전환할 수 있음.
2. 상태 관리와 UI 동기화: 라우터를 사용하면 URL의 경로에 따라 애플리케이션의 상태를 관리하고 해당 상태에 따라 UI를 동기화할 수 있음. 예를 들어, 사용자가 특정 URL을 방문하면 해당하는 컴포넌트가 렌더링되고, 그에 따라 해당 페이지에 필요한 데이터를 불러올 수 있음.
3. 북마크, 뒤로가기 및 앞으로가기 지원: 브라우저의 주소 표시줄의 URL을 변경함으로써 사용자가 북마크를 만들거나 뒤로가기/앞으로가기 버튼을 사용하여 페이지를 탐색할 수 있음.
4. 네스트된 라우팅: 라우터를 사용하면 중첩된 라우팅을 구현할 수 있습니다. 즉, 한 컴포넌트 내에서 또 다른 라우터를 포함하여 다수의 라우터를 중첩하여 사용할 수 있음. 이는 복잡한 페이지 구조를 관리하고 효율적으로 제어할 수 있도록 도와줍니다.
5. 동적 라우팅: 일부 라우팅 라이브러리들은 동적 라우팅을 지원함. 이는 URL 경로의 일부를 변수로 사용하여 동적으로 라우트를 생성할 수 있음. 

라우터설정은 완료했고 로그인과 프로필화면은 우선 파일만 만들어 뒀다. 

그리고 다른걸 진행하기전에 reduxtoolkit으로 변경하고 시작하는게 더 편할거같아서 configStore.js 를 configureStore를 사용해서 바꿔줬다. 

로그인 상태인 경우에만 홈, 상세, 프로필에 접근을 해야한다 .

그럴려면 우선 로그인 상태를 관리해야하는데 reduxtoolkit을 이용하여 만들었다 .

 

그리고 전에 만들어둔 configStore.js 에 configureStore 로 만든 reducer 객체 안에 key와 value값을 추가해주고

PrivateRoute라는 컴포넌트를 따로 생성해 로그인상태에따라 접근하는 화면이 다르게끔. 로그인 상태값이 true면 home화면으로, false면 로그인페이지로 이동하게끔 만들었다. 

마지막으로 위에 라우터설정을 한 부분에 

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

        <Route path="/detail/:id" element={<PrivateRoute><Detail /></PrivateRoute>} />

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

        <Route path="/Profile" element={<PrivateRoute><Profile /></PrivateRoute>} />

        <Route path="*" element={<Navigate replace to="/" />} />

이런식으로 PrivateRoute로 감싸주면 끝이다.