신입개발자_장민기

import { useReducer } from "react" /* https://react.vlpt.us/basic/20-useReducer.html 상태관리방법 1. useState 2. useReducer : 컴포넌트와 상태 업데이트 로직을 분리 가능하도록 구현할 수 있음 - 아키택처: 액션 => reducer -> state -> 뷰(이벤트 발생) 1) reducer는 현재 상태갑인 state와 action인자를 받아서 새로운 nextState값을 반환 import{useReducer} from 'react'; const reducer = (state, action) => { retrun nextState; } 2) action의 형태(dispatch함수로 전달) { type: 'INCREMENT..

cart-context import { createContext } from "react"; export const CartContext = createContext(""); App import { useState } from "react" import CartModel from "./components/CartModel" import {CartContext} from"./store/cart-context" export default function App(){ const [shoppingCart, setShoppingCart] = useState([]); const ctxValue = { items: shoppingCart, addItemToCart: handleAddItemToCart }; funct..

cart-context.js import { createContext } from "react"; export const CartContext = createContext(""); App import { useState } from "react" import CartModel from "./components/CartModel" import {CartContext} from"./store/cart-context" export default function App(){ const [shoppingCart, setShoppingCart] = useState([]); function handleAddItemToCart(cart){ console.log(cart); setShoppingCart([...shopp..

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 { useRef, useState} from "react" export default function App(){ const inputRef = useRef(); const [showText, setShowText] = useState(true); return ( App {showText && } setShowText(() => !showText)}>텍스트 보이기/가리기 {/* 다음 버튼은 위의 버튼이 보이는 경우에만 동작 / 가리기가 된 상태에서는 에러 발생 */} inputRef.current.focus()}>텍스트1로 이동 에러 inputRef.current && inputRef.current.focus()}>텍스트2로 이동 showText && inputRef.current.focus..

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)