useNavigate

[React] 일기장 프로젝트 2. 페이지 구현 - 수정, 상세화면

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. 수정페이지 2. 상세페이지 1. 수정페이지(/edit) 수정페이지는 일기 작성페이지와 거의 유사해서 만드는 과정도 간단합니다. 1. id 정보와 일기 데이터 가져오기 id는 App.js의 route에서 path variable로 설정한 후 useParams를 이용해 id 객체로 불러올 것입니다. 또 일기 데이터는 일기 작성화면에서 구현했듯 useContext를 이용해 가져올 것입니다. 1-1. Edit 컴포넌트 만들기 import { useNavigate } from 'react-router-dom'; const Edit = () => { const navigate = useNavigate(); retu..

[React] 일기장 프로젝트 2. 페이지 구현 - 홈화면

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다. 목차 1. 헤더 2. 다이어리 리스트 3. 필터 4. 다이어리 아이템 가장 먼저 홈화면의 구조를 보겠습니다. 맨 위에 현재 월을 알려주는 헤더, 그 밑에 필터가 있고, 그 아래에 일기 리스트가 있습니다. Home 컴포넌트를 만든 후, 각 요소를 추가해봅시다. 1. 헤더 1. 날짜 state 만들고 headText 설정 import { useState } from 'react'; const [curDate, setCurDate] = useState(new Date()); const headText = `${curDate.getFullYear()}년 ${curDate.getMonth() + 1}월`; 현재 날짜 sta..

[React] 일기장 프로젝트 0. 페이지 라우팅

이 블로그는 유데미 '한입 크기로 잘라먹는 리액트' 강의를 듣고 복습하고자 작성되었습니다! 목차 1. 페이지 라우팅이란 2. React Router 실습 3. React Router 사용 4. React Router 응용 1. 페이지 라우팅이란 일기장 프로젝트를 시작하면서 가장 먼저 진행한 것은 페이지 라우팅이었습니다. 먼저 라우팅이란, 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 과정입니다. 그리고 페이지 라우팅이란, 서버에 특정 페이지를 달라고 요청(request) 해서, 서버가 알맞은 페이지를 제공하도록 하는 과정을 말하는 것입니다. 즉, 서버로부터 페이지를 요청하고 받을 경로를 만드는 것입니다. 보통 MPA(Multipage Application), 즉 html 페이지가 여러 개인 방식에서..