input관리매번랜너링문제해결 import { useState, useRef } from "react"; //////////////// export default function Player() { const username = useRef(); const age = useRef(); //태그 중 ref={playerName}을 참조함 ////////////////////state와 다르게 값을 변경해도 재랜더링 되지 않고, current 속성을 사용 const [inputs, setEnterdPlayerName] = useState({username:"", age:""}); //button 을 클릭했을 때만 재랜더링 됨 , 효율적임 function handleClick() { var new_inputs..

GameBoarder import React, { useState } from 'react'; import "./GameBoarder.css" const initialGameBoard=[ [null, null, null], [null, null, null], [null, null, null], ] // const[gameBoard, setGameBoard] = useState(initialGameBoard); function GameBoarder() { const[gameBoard, setGameBoard] = useState(initialGameBoard); function handleSelect (rowIndex, colIndex){ //1.방법 (베열에 변경사항이 저장되나 동일한 주소값이기 때문에 ..

자식에게이벤트전달패턴 import React from 'react'; import TabButton from './assets/components/TabButton'; function App() { //부모에서 자식 이벤트 핸들러 구현 function handleEvent(){ console.log("hellobutton"); } //App컴포넌트 실행횟수 체트 => 실행하면 1번만 호출됨 console.log("App Component") return ( {/*onSelect 대신에 임의의 값 사용가능 자식 호출 시 이벤트 함수 를 전달함 매우 많이 사용되는 중요한 패턴임*/} Java SQL SPRING SpringBoot Vue ); } export default App; import React f..

PROPS img import reactImg from './assets/exam.png'; function App() { return ( {/* public 폴더에 sample.png 붙여넣기 할것*/} ); }; export default App; PROPS index.js 에서 막으면 결과가 출력 한번만 됨 import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App.js'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementByI..

부서삭제 부서삭제 부서번호 삭제 {{ msg }} 부서번호 부서이름 위치 {{ dept.deptno }} {{ dept.dname }} {{ dept.loc }} npm install vue-router props Bar Bar{{ pw }} Baz Baz {{ pw }} Foo Foo props-od:{{ id }} $router.params.id={{ $useRouter.params.id }} Knu knu userid={{ userid }} NotFound Not Found app에서 라우팅연습 Home login/abcd Baz-pw /my/abcd knu {iserid:"홍길동"} http://localhost:8081/#/login/abcd http://localhost:8081/#/my/12..

eventBus eventBus.vue HelloWorld.vue {{msg}} HelloWorld2로 이벤트 전달 HelloWorld2.vue {{ msg }} app.vue EventBus Input.vue list.vue {{ index + 1 }}. {{ data }} 삭제 App.vue slot 아름다운 밤입니다 {{ msg }} App.vue {{ A.message }} {{ A.header }} {{ A.footer }} HelloWorld.vue {{ msg }} {{ footerText }} src_14_slot4_SpeechBox_named helloWorld.vue {{ msg }} App.vue {{ A.header }} {{ A.message }} {{ A.footer }} axo..