리액트(React)26 리액트 라우터(React Router) 사용법(2) 리액트 라우터 사용법(1) 에 이어서 작성합니다. 1. 프로젝트에 라우터 적용하기 src/App.js 파일에서 react-router-dom 에 내장되어 있는 BrowserRouter 라는 컴포넌트를 사용하면 됩니다. 2. 페이지컴포넌트 만들기 라우터를 통해 여러 페이지로 구성된 웹 페이지를 만들기 위해 각 페이지에서 사용할 컴포넌트를 만듭니다. 사용자가 웹페이지 처음 들어올 때 보이는 Home 페이지와 웹사이트 소개하는 About 페이지를 pages 폴더에 만들어 봅니다. 파일은 src/pages/Home.js , src/pages/About.js. 두 개 생성합니다. const Home = () => { return ( 홈 힘이나는 코딩 홈 페이지 입니다. ); }; export default Hom.. 2023. 5. 28. 리액트 라우터(React Router) 사용법 (1) 리액트는 리액트 라우터를 사용하여 여러 페이지로 구성된 프로젝트를 만들 수 있는 싱글페이지 애플리케이션(SPA) 입니다. 싱글페이지 애플리케이셔은 뷰 렌더링을 사용자의 브라우저가 담당하도록 하고 우선 웹 애플리케이션을 브라우저로 불러와서 실행 시킨 후에 사용자와 인터렉션이 발생하면 필요한 부분만 자바스크립트를 사용하여 업데이트 하는 방식입니다. 따라서 기술적으로는 한 페이지만 존재하지만 사용자가 느끼기에는 여러 페이지가 존재하는 것처럼 느낄 수 있습니다. 리액트 라우터는 사용자의 브라우저 주소창의 경로에 따라 알맞은 페이지만 보여주지만 별도 경로의 html 을 새로 요청하는 것이 아니라 브라우저의 History API를 사용하여 브라우저 주소창 값만 변경하고 기존 페이지의 웹 애플리케이션을 유지하면서 라.. 2023. 5. 28. 이전 1 2 3 4 5 다음 반응형
