useParams OUTER v6 SPA (Single-page application) => 새로고침되지 않고 컴포넌트가 교체되는 듯하게 페이지 이동이 가능 CSR (Client Side Rendering) => 사용자가 필요할 때 데이터를 가져오기때문에 매번 서버에 요청하지 않아도 됨 React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 path='/' : /는 홈(index)을 나타냄 element={... useParamsuseNavigateuseSearchParamsReactrouterReact TVING 클론 코딩 프로젝트 - useParams 와 useNavigate 우리가 영화 리스트가 나오고 리스트 중에 특정 포스터를 클릭하면 그 포스터 내용과 관련된 내용이 나오는 Detail창이 나오는 사이트가 보일 것이다 그러려면 포스터를 클릭할 때 포스터마다 고유의 값이 존재해야 한다 그 고유의 값을 가져와 보도록 하자 V5버전 useHistory V6버전 useNavigate 다음처럼 훨씬 간편해졌다 이제 useNavigate를 이용해 id 값을 가진 링크로 ... TVINGTailwind CSSuseNavigateuseParams프로젝트React-slickReacttypescriptReact [React] routes 파일 코드가 길어질수록 를 계속 반복해서 사용하게 됩니다. 이런 문제점을 해결하기 위해서 routes 파일을 따로 만들어서 모든 route 객체들을 관리해줍니다. routes 파일 각각의 page를 import 하고, 각 route 객체의 path와 component를 routes.js 파일에서 관리해줍니다. route를 추가하고자 하면 routes.js 파일에 route 객체를 추가해주면 됩니다... routes.jsuseParamslinklink
OUTER v6 SPA (Single-page application) => 새로고침되지 않고 컴포넌트가 교체되는 듯하게 페이지 이동이 가능 CSR (Client Side Rendering) => 사용자가 필요할 때 데이터를 가져오기때문에 매번 서버에 요청하지 않아도 됨 React에서 CSR기반의 페이지 라우팅을 할 수 있게 해주는 라이브러리 path='/' : /는 홈(index)을 나타냄 element={... useParamsuseNavigateuseSearchParamsReactrouterReact TVING 클론 코딩 프로젝트 - useParams 와 useNavigate 우리가 영화 리스트가 나오고 리스트 중에 특정 포스터를 클릭하면 그 포스터 내용과 관련된 내용이 나오는 Detail창이 나오는 사이트가 보일 것이다 그러려면 포스터를 클릭할 때 포스터마다 고유의 값이 존재해야 한다 그 고유의 값을 가져와 보도록 하자 V5버전 useHistory V6버전 useNavigate 다음처럼 훨씬 간편해졌다 이제 useNavigate를 이용해 id 값을 가진 링크로 ... TVINGTailwind CSSuseNavigateuseParams프로젝트React-slickReacttypescriptReact [React] routes 파일 코드가 길어질수록 를 계속 반복해서 사용하게 됩니다. 이런 문제점을 해결하기 위해서 routes 파일을 따로 만들어서 모든 route 객체들을 관리해줍니다. routes 파일 각각의 page를 import 하고, 각 route 객체의 path와 component를 routes.js 파일에서 관리해줍니다. route를 추가하고자 하면 routes.js 파일에 route 객체를 추가해주면 됩니다... routes.jsuseParamslinklink