Route로 페이지 이동 라우터 설치 npm install react-router-dom index.js에서 을 로 감싸줍니다. path에는 경로를 element에는 해당 경로에 띄울 요소를 넣어주면 됩니다. useNavigate로 페이지 이동 let navigate = useNavigate(); navigate('/경로'); useNavigate()를 변수로 지정해주고 navigate('/'); 경로를 넣은 함수를 호출해주기만 하면 됩니다! 해당 Nav 태그를 클릭하면 /detail 페이지로 이동합니다. navigate(-1) : 전페이지로 navigate(-2) : 전전페이지로 Link to로 페이지 이동 Link to는 a태그랑 나타나는 모습이 같음
리액트 비동기 사용법 npm install axios 리액트 터미널에 axios를 설치해줍니다. package.json에 스프링부트에서 사용하는 포트를 넣어줍니다. @RestController 해당 컨트롤러를 비동기로 전달해주고 전달되는 데이터를 useEffect로 받아올 수 있습니다. useEffect(() => { axios.get('/').then(res => { }); }, []); axios.get()은 컨트롤러의 GetMapping으로 axios.post()는 PostMapping으로 가서 데이터를 받아옴!!
데이터 내보내기 export default 데이터명; 데이터가 여러개면 export {데이터1, 데이터2, 데이터3}; 내보낸 데이터 사용 export한 데이터 이름 그대로 사용하면 됩니다! 이때 import 해줘야함! 컴포넌트도 동일하게 내보내고 사용하면 됩니다!
리액트 부트스트랩 설치 https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 프로젝트 터미널에 npm install react-bootstrap bootstrap index.html 부트스트랩 사용 여기서 은 컴포넌트로 Ctrl+Space눌러서 임포트도 시켜줘야합니다!
