신입개발자_장민기

App import MemberListFun from "./components/MemberListFun" export default function App(){ return ( App ) } MemberListFun import MemberFun from "./MemberFun" import { useState } from "react" export default function MemberListFun(){ const[memberData, setMemberData] = useState([]); const[inputs, setInputs] = useState({ username: '', age: '', address: '' }); const {username, age, address} = inputs; ..

App.js import GameBar from "./components/GameBar" export default function App(){ return ( ) } GameBar.js import "./GameBar.css" import { useState } from "react" const initialGameBoard = [ //게임 보드판 초기 상태(전부 공백) [null, null, null], [null, null, null], [null, null, null], ]; export default function GameBar(){ const [gameBoard, setGameBoard] = useState(initialGameBoard); function handleSelect(rowInd..

import { useState } from "react" export default function App(){ /* *****수정된 부분***** */ const [inputs, setInputs] = useState({userid: "", passwd: ""}); //userid와 passwd 초기값은 공백(JSON) function handleSubmit(event){ //페이지 이동 방지 event.preventDefault(); console.log(inputs); console.log(inputs.userid); console.log(inputs.passwd); } /* *****수정된 부분***** */ function handleChange(event){ //data의 값을 JSON에 저..

import { useState } from "react"; export default function App(){ const [num, setNum] = useState({n:0}); /* 1. 불변 변수가 아니기 때문에 화면 갱신이 안 됨 객체(배열)은 반드시 불변객체로 관리해야 함 배열 요소 값을 수정하는 방식이 아니라 배열 자체를 덮어쓰는 방식 */ function onIncrease() { /* 작동되지 않는 방식 */ // num.n = num.n + 1; // setNum(num); // console.log("onIncrease: " + num.n); setNum({...num, n: num.n + 1}); /* ...num: num객체 복사 기존 객체 const num = {n: 0} n..

App.js import { useState } from "react"; export default function App(){ const [isEditing, setIsEditing] = useState(true); /* 초기값은 true */ /* handleEvent() 내용 */ function handleEvent(){ /* 옛날 방식 */ //setIsEditing(!isEditing); /* 람다 방식 */ setIsEditing(() => !isEditing) /* handleEvent()를 발동시키면 isEditing이 False가 됨 */ console.log("이전상태는: " + isEditing); /* 이전값인 isEditing의 상태 확인 */ } /* 초기에 뿌려줄 내용 */ ..

export default function App(){ let number = 0; function onIncrease(){ number += 1; console.log(number) } function onDecrease(){ if(number == 0){ number = 0 } else { number -= 1; } console.log(number) } return ( {number} + - ) } 콘솔창에서는 증감이 보이나, 랜더링은 0에서 멈춰 있음 import {useState} from 'react'; //1. import {useState} from 'react' export default function App(){ /* state: 사용할 데이터가 변경되면 자동으로 재랜더링 */ /* ..

export default function App(){ function handleEvent(e){ console.log("handleEvent Click"); e.preventDefault(); } function parent(e){ console.log("parent: " + e); } function child(e){ console.log("child: " + e); e.stopPropagation(); //부모의 버블링 방지 } return( submit parent child ) }

App import ChildComponent from "./components/ChildComponent" export default function App(){ return( App ) } ChildComponent import SubChildComponent from "./SubChildComponent" export default function ChildComponent(props){ //props빠짐 function handelEvent(v){ console.log("handelEvent: "+ v) } return( ChildComponent handelEvent(e)}>ChildComponent에서 ) } SubChildComponent export default function SubCh..

App.js import TabButton from "./components/TabButton" export default function App(){ var x = "버튼을 선택하세요"; function handelEvent(selectedButton){ //일반적인 변수는 화면 갱신 X(App이 한번만 실행되기 때문) console.log("Hello Button", selectedButton); //useState hook을 이용해 해결 가능 x = selectedButton; } //App 컴포넌트 실행횟수 체크 => 실행하면 1번만 호출 console.log("App Component"); return( 이벤트 처리 {/* ********************************* onSele..

import F1 from "./components/F1"; let user = { name: "hong", age: 10 } export default function App(){ return( ) } export default function F1(props){ const user = {...props, name: "이순신"} console.log(user.name, user.age) return ( ) }