신입개발자_장민기

App import { useRef} from "react" import Box from "./components/box" export default function App(){ const boxRef = useRef(); function handleEvent(){ console.log("부모창에서 자식창의 open함수 호출") boxRef.current.open(); //자식의 open함수 호출 } return ( App 자식의 open 호출 모달창 보기 ) } box import { useRef, useImperativeHandle, forwardRef } from "react" //반드시 fowardRef로 감싸고 Ref로 받음 const Box = forwardRef((props, ref) => ..

App import Box from "./components/Box" import { useRef } from "react" export default function App(){ const boxRef = useRef(); function handleEvent(){ console.log("부모창에서 자식창의 open함수 호출") boxRef.current.open(); //자식의 open함수 호출 } return ( App 자식의 open 호출 innerText ) } Box import {forwardRef, useImperativeHandle} from "react" //forwardRef로 props와 ref 감싸기 const Box = forwardRef((props, ref) => { //반드..

import { useState } from "react" export default function App(){ const [isEditing, setIsEditing] = useState(true) function handleEdit(){ setIsEditing(() => !isEditing) } let tag1 = ( 홍길동 ) if(!isEditing){ tag1 = ( ) } return ( 조건부 랜더링 구현1: if문 {tag1} {isEditing ? "save" : "edit"} 조건부 랜더링 구현2: 3항연산자 이용 {isEditing ? 이순신 : } {isEditing ? "save" : "edit"} 조건부 랜더링 구현3: 3항연산자 이용 {isEditing && 유관순}{!isE..

import { useState } from "react" export default function App(){ const [num, setNum] = useState(0); const [step, setStep] = useState(1); function onPlus(){ console.log("step: ", step) setNum(num + parseInt(step)) } function onMinus(){ console.log("step: ", step) setNum(num - parseInt(step)

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: 사용할 데이터가 변경되면 자동으로 재랜더링 */ /* ..