2023.03.08) 항해 31일차 (투두리스트 상세페이지)

오늘은 만들던 투두 리스트 과제를 끝냈다!!!!!

상세페이지도 연결하고, 수정기능과 글자수 제한도 만들었당.

다른 것보다 수정기능이 너무 어려웠지만!

잘 이겨냈다!!

비록 커스텀 훅을 만드는 것을 잊어버렸지만....제출을 해버렸으니,,

 

그래도 내일 한번 만들어 보려고 한당~

 

 

1) 상세 페이지 연결

// Working 컴포넌트
const navigate = useNavigate();               
<Link to={`/sub/${item.id}`}>상세페이지</Link> 	  // 1번째 방법
<button 				// 두번째 방법
  onClick={() => {
    navigate(`/sub/${item.id}`);
  }}
>

버튼이나 링크로 상세페이지를 연결했다.

id로 연결하였고, 

 

//Router.js
<Route path="sub/:id" element={<Sub />} />

라우터 파일에서도 id로 연결되게 했다.

 

이후에 스타일을 주고 배포까지 했다! 뿌듯

별거 없는 것 같지만 3일동안 날 괴롭힌 친구다...

 

 

https://todo-redux-2.vercel.app/

React App