sohyeon kim

💡 각각 언제 쓰면 좋을지 알아보자. 🌐 Link 클릭해서 페이지를 이동하도록 할 때! 텍스트나, 버튼, 이미지 등에 사용한다. 홈으로 가기 🌐 Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때! 회원 전용 페이지에 로그인 없이 들어와서 로그인 페이지로 리다이렉트 하는 경우 상품 상세 페이지에서 상품이 품절되었거나 삭제되어서 다른 페이지로 이동시키는 경우 if (!course) return ; 🌐 useNavigate 특정 코드의 실행이 끝나고나서 페이지를 이동시키고 싶을 때! 장바구니 담기를 눌렀을 때 리퀘스트를 보내고, 장바구니 페이지로 이동시키는 경우 결제하기 버튼을 누르고 나서 모든 결제가 완료된 후, 페이지를 이동시키는 경우 리다이렉트된 로그인 페이지에서 로그인을 완..

💡 특정멤버에게 편지를 작성하고, 멤버 페이지마다 그 멤버의 편지함을 볼 수 있는 사이트 😇 레이아웃 간의 props 공유를 해보자 Header 와 Footer 는 고정해 두고 path 변경에 따라 children 에 pages 들로 화면이 변경된다. 🚨 문제는 ! 1. member 페이지에서 편지를 작성하고 편지를 클릭 해 detail 로 갈 때 그 letter 의 정보를 불러오지 못하고 있다. (연결이 안되어있다.) 2. home, member, detial 세 페이지를 서로 이동하면 letter 데이터가 초기화된다. 현재 편지 데이터를 모아둔 letters 를 member 페이지 안에 만들어둬서 다른 페이지인 detail 에서 어떻게 가져와야 하는지를 모르겠어서 튜터님께 찾아갔다. (전날부터 막막해..

💡동적 라우팅 Dynamic Route path 에 유동적인 값을 넣어 특정 페이지로 이동하게끔 구현한 방법 이렇게 페이지들을 하나씩 지정해주는게 아니라 works/ 뒤 숫자들을 유동적으로 파라미터로 받아 오게 해보자! 1. 먼저 Router.js 에서 works/:id 를 적어준다. 2. Work.js 에서 useParams 를 연결 그럼 이동한 페이지의 id 를 얻을 수 있다! Router.js 에서 넣어준 id 가 객체에 들어가 있다. const { id } = useParams(); // 이런 식으로 가져올 수 있다. 3. 테스트 할 데이터 파일을 하나 만든다. Data.js export const data = [ { id: 1, todo: "리액트 공부", }, { id: 2, todo: "노드..