프로젝트를 진행하면서 프론트 페이지에서 선택된 tag의 값을 다른 페이지로 넘겨줘야 하는 상황이 발생하였다. Router의 Link to를 사용하여 다른 페이지로 이동하고 있었기 때문에 현재 페이지의 값을 다른 페이지로 넘겨주는 방법을 작성하려 한다. Link to는 부모 자식 컴포넌트간 데이터를 주고받는 props처럼 state를 사용하여 값을 전달할 수 있다. Page1.js 클릭 Page2.js import React from "react"; import { useEffect, useLocation } from "react-router-dom"; function Page2() { const location = useLocation(); const oneTag = location.state.oneTa..

React의 Router를 사용하여 페이지를 이동하면서 /myPage 다음에 주소를 연결하고 싶어졌다. 단, myPage라는 글자를 중복해서 작성하고 싶지는 않았다! 이는 중첩 라우팅를 사용하여 해결할 수 있다. 중첩 라우팅을 사용하기 전에는 아래와 코드를 작성해야 원하는 URL을 얻을 수 있었다. root.render( ); 일반적인 Router을 사용하게 되면 path에 myPage를 공통적으로 작성해야 한다. 하지만 중첩 Router을 이용하면 훨씬 깔끔하게 작성할 수 있다. root.render( ); 단, Link 부분에서는 모든 주소를 작성해야 원하는 컴포넌트 페이지로 넘어갈 수 있다. [ 참조 ] https://7ingout.tistory.com/171

React 기본 포트 변경과 프로젝트를 start했을 때 기본 URL을 변경하는 방법에 대해 정리하려고 한다.현재 프로젝트는 Spring Boot로 이루어진 프로젝트와 연결되어 있는 상태이다. 포트 변경package.js 파일에서 설정을 변경해준다. 기본 포트인 3000에서 3031로 변경하였다.Window 환경"scripts": { "start": "set PORT=3031 && react-scripts start", ... },Mac OS, Linux 환경"scripts": { "start": "export PORT=3031 && react-scripts start", ... }, 기본 URL 변경기본 URL을 변경하는 방법에는 크게 2가지가 있다.방법 1pac..