오늘의 나는 무엇을 잘했을까?
배정된 시간에 열심히 참여했고, 프로젝트 관련 조사를 성실히 해가서 팀에게 도움이 조금이나마 되었던 것 같다.
또, 멘토링 시간에 질문을 해서 프로젝트 시작 전 어려움을 다소 해결할 수 있었던 것 같다.
오늘의 나는 무엇을 배웠을까?
React Router (3)
Navigate로 페이지 리다이렉트 하기
Navigate 컴포넌트는 리다이렉트를 할 수 있도록 해주는 컴포넌트이다.
이 때 리다이렉트란, 페이지에 접속했을 때 어떠한 이유 때문에 다른 페이지로 이동시키는 것을 말한다. 예를 들어 로그인이 되어 있지 않은 상태에서 특정 페이지에 접속했을 때, 로그인 페이지로 전환되는 것이 리다이렉트이다.
문법은 다음과 같다.
<Navigate to="path-to-page" />Navigate 컴포넌트는 prop으로 to 를 받는다. to prop에는 경로를 넣어주면 된다.
앞선 예시처럼 로그인이 되지 않았을 때 특정 페이지로 이동이 되도록 구현해 보자.
// pages/Login.js
const Login = () => {
return <div>로그인 페이지입니다</div>
};
export default Login// pages/Mypage.js
const Mypage = () => {
const isLoggedIn = false;
if(!isLoggedIn) {
<Navigate to="/Login" />
}
return <div>마이 페이지입니다</div>
};
export default Mypage;예시 코드에서는 isLoggedIn 이라는 값을 항상 false 로 주고 있지만, 실제 서비스에서는 로그인 여부에 따라 값이 달라질 것이다. 예시로만 보자.
만약 isLoggedIn 이 false 라면 Navigate 컴포넌트를 통해 로그인 페이지로 리다이렉트가 발생할 것이다.
Navigate 컴포넌트에 replace 롭션을 넣어줄 수도 있다. 이 값이 true 라면 페이지를 이동할 떄 현재 페이지를 페이지 기록에 남기지 않게 된다.
NavLink로 특정 스타일이나 CSS 클래스 적용하기
NavLink 컴포넌트는 Link 컴포넌트와 동일한 동작을 하지만, style prop으로 함수를 받아 스타일을 적용해 줄 수 있다.
만약 헌재 페이지 경로가 컴포넌트의 to prop 경로와 일치하면 스타일 또는 CSS 클래스가 적용된다.
prop으로 받는 함수는 매개변수로 객체를 받고, 그 객체에는 isActive 라는 boolean형 프로퍼티를 가지고 있다.
// 스타일 적용
<NavLink to="path-to-page" style={({isActive}) => isActive ? activeStyle : undefined} />
//클래스 적용
<NavLink to="path-to-page" className={({isActive}) => isActive ? "active" : undefined} />useNavigate Hook으로 페이지 이동하기
useNavigate 는 리액트 라우터의 custom Hook으로써, Link 컴포넌트를 사용하지 않고 다른 페이지로 이동할 수 있게 해준다.
useNavigate Hook으로 navigate 함수를 가져와서 그 매개변수로 이동할 경로를 넘겨주면 된다.
예시 코드는 다음과 같다.
import { useNavigate } from "react-router-dom";
const Example = () => {
const navigate = useNavigate();
const goToSomePage = () => {
navigate("/somepage");
}
return <button onClick={goToSomePage}>somepage 가기</button>
}버튼을 클릭하면 /somepage 라는 경로로 이동하게 된다.
만약 숫자 타입으로 navigate 함수의 매개변수를 넣어주면 그 숫자 횟수만큼 앞으로 가거나(양수) 뒤로 간다(음수). 또, Navigate 컴포넌트와 같이 replace 옵션을 넣어줄 수도 있다. 동작은 그와 동일하다.
const goToSomePage = () => {
navigate("/somepage", { replace: true });
}NotFound 페이지 만들기
정의되지 않은 경로로 사용자가 접근하려고 했을 때는 어떻게 해야할까? 페이지를 찾을 수 없을 때 나타나는 NotFound 페이지를 만들어 해당 페이지로 연결될 수 있도록 하면 된다.
// /pages/NotFound.js
const NotFound = () => {
return <div>Not Found</div>
}
export default NotFound;// /App.js
import { Route, Routes } from "react-router-dom";
// 다양한 페이지 import
const App = () => {
return (
<Routes>
<Route path="/" element={<Something />} />
<Route index element={<Something2 />} />
</Route>
<Route path="*" element={<NotFound />} />
</Routes>
);
}
export default App;브라우저에서 경로를 확인할 때, 위쪽에 위치한 Route 컴포넌트부터 차례로 내려오며 일치하는 경로가 있음을 확인한다.
만약 일치하는 경로가 없다면 마지막 Route 컴포넌트에 다다르게 되는데 * 라는 와일드카드 문자를 path로 가진 녀석이다. 이는 아무 텍스트나 매칭한다는 의미이기 떄문에 일치하는 경로를 가진 Route가 없다면 이 Route가 화면에 나타나게 된다.
내일 마지막으로 중첩된 Route를 사용하는 방법을 정리하며 React Router 사용법 정리를 마치려고 한다.
프로젝트 준비
1차 프로젝트 기간이 시작되었다.
이번 프로젝트는
- 코인을 구입한 시점의 가격과 현재 가격을 비교하여 내가 보유하고 있는 코인의 현재 가치가 얼마인지 계산해주는 기능
- 특정 코인의 기간 별 가격 변동을 그래프로 표현하는 기능
- 다양한 코인들의 현재 시세를 표로 정리해주는 기능
을 가진 웹 애플리케이션을 만드는 것이 주어졌다.
어제 프로젝트 kick-off 를 시작하여 오늘까지 세부사항을 조율하는 작업을 했다. 컴포넌트를 나누고, 각 컴포넌트가 필요로 하는 데이터가 무엇인지 정리해보고, 데이터를 제공하는 API에 대해 분석해 보는 시간을 가졌다.
내일은 팀원별 어떤 컴포넌트를 제작할지를 논의해서 실제 코드 작성을 시작해 보려고 한다.
첫 프로젝트인 만큼 열심히 참여해서 좋은 결과물을 만들어 봐야겠다.
오늘의 나는 어떤 어려움이 있었을까?
오늘 배가 좀 아팠다. 어제 뭔가를 잘못 먹었나 싶긴 한데, 화장실을 다녀오느라 시간 가는 줄도 모르고 15분 정도 지각을 했다. 앞으로는 이런 이슈를 팀원에게 미리 공유해서 양해를 구해야 겠다.
내일의 나는 무엇을 해야할까?
- 프로젝트 kick-off 최종 회의
- 프로젝트 컴포넌트 제작 시작하기
- React Router 마지막 정리
