Rainyjune Blog

Navigate let navigate = useNavigate(); https://reactrouter.com/en/main/hooks/use-navigate react router dom에서 제공하는 페이지 이동 관련 함수 집합. onClick 이벤트 핸들러에서 navigate('url')을 호출하면 클릭시 해당 url로 페이지를 이동한다. { navigate('/detail')}}> ... 404 Page Routes에 지정해주지 않은 주소로 접근시 404 Page를 띄우고 싶은 경우 * 표시가 Route에 지정되지 않은 나머지 모든 주소를 의미한다. Nested Routes 하나의 페이지 내 하위 페이지를 보여줄 때 사용하는 방법. // 실제 주소는 /about/about_low가 된다. Rout..

React는 기본적으로 Single Page Application이므로 하나의 페이지에서 여러개의 컴포넌트를 보여주는 방식을 채택한다. (보여주는 페이지는 index.html 하나) 즉, url의 하위 주소를 호출하면 해당 page를 불러오는 것이 하닌 해당 url에 해당하는 component를 보여주도록 한다. React Router Dom 보여주고자 하는 페이지 컴포넌트를 일일이 구현하는 것이 아니라 React Router Dom 라이브러리를 사용하여 페이지 컴포넌트를 구현한다. Terminal에서 npm install react-router-dom@6 을 입력한다. (React Router Dom v6 설치) index.js에 component 호출부를 component로 감싼다. (자동으로 imp..

JavaScript에서 타 파일의 내용을 참조해야하는 경우 import/export 문법을 사용한다. Import 타 파일에서 export된 항목에 대해 접근할 수 있도록 한다. Export 타 파일에서 import 할 수 있도록 접근 가능한 대상을 지정한다. // export 예제 let data = [ { id : 0, title : "White and Black", content : "Born in France", price : 120000 }, { id : 1, title : "Red Knit", content : "Born in Seoul", price : 110000 }, { id : 2, title : "Grey Yordan", content : "Born in the States", pri..