완성본 1. 간단한 Header 부분만들기 Component 로 된 Button 으로도 넣을수 있어서 유익.. } rightChild={alert("오른쪽 클릭")}/>} /> 1. {내용} 부분에 Button 을 넣어도 정상적으로 작동 완료 const MyHeader = ({headText,leftChild,rightChild}) => { return {leftChild} {headText} {rightChild} } export default MyHeader;
완성본 1. 총 3가지의 버튼을 생성하기 alert("버튼클릭")} type={"positive"} /> alert("버튼클릭")} type={"negative"} /> alert("버튼클릭")} type={"default"} /> 2. MyButton을 컴포넌트화 시켜주기 : 위에서 text , type , onclick 을 파라미터 변수로 받아줘서 * btnType = > positive,negative 이 아닌 다른 값이 들어오면 강제로 "default" 로 변경해주는 함수. * MyButton.defaultProprs = > type값이없으면 "default" 로 만들어준다. const MyButton = ({text,type,onClick}) => { // positive 나 negative 아..
1. React 기본 경로 위치 => /public/** 와 같은역할 const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; import "./App.css" import {BrowserRouter, Route, Routes} from "react-router-dom"; import Home from "./pages/Home" import New from "./pages/New"; import Edit from "./pages/Edit"; import Diary from "./pages/Diary"; function App() { const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; r..
1. Path Variable 이런식으로 디테일 화면으로 갈때사용한다.. const {id} = useParams(); // 전달받아서 모아서 객체 🐳 상세페이지 js import {useParams} from "react-router-dom"; const Diary = () => { const {id} = useParams(); // 전달받아서 모아서 객체 console.log(id) return ( Diary 이곳은 일기 상세 페이지 입니다. ); } export default Diary; 🐳 App.js import "./App.css" import {BrowserRouter, Route, Routes} from "react-router-dom"; import RouterTests from './c..
사용한 개발환경 * Spring_Boot 3.2.1 * Maria_db 8.xx (RDBMS) * Mybatis (Frame_Work) * LomBok * JAVA 17 * React App 생성 cd src/main npx create-react-app {프로젝트명} 위와 같이 리액트 앱이 실행되는 모습이 보인다. 나는 3000번 포트가 이미 사용중이어서 3001번으로 실행하였다. 아마 여러분은 localhost:3000으로 실행되었을 것이다. 프로젝트 연동 여기까지 잘 따라왔다면 React와 Spring Boot의 프로젝트가 각각 3000번과 8080번 포트에서 수행되는 모습까지 확인했을 것이다. 그렇다면 이제 두 프로젝트를 연동시켜보자. ⚡️ Proxy 설정 기본적으로 React 프로젝트는 3000..