신입개발자_장민기

App import React from "react" import { useState, useEffect } from "react" export default function App(){ //컴포넌트 함수 안에서 useState 선언 //1. [의존성배열]에 state값이 있는 경우: number값이 변경되면 부수효과함수가 재실행됨 //2. [] 빈배열을 지정한 경우, 단 한번만 실행 //3. 배열 지정 안 하면 App이 재랜더링될 때마다 부수효과함수가 재실행됨 //4. strict 모드로 실행하면 2번 호출( 1번 호출하려면 index.js 수정 ) const [number, setNumber] = useState(0); const [number2, setNumber2] = useState(0); us..

App import { createContext, useReducer, useState } from "react" import Button from "./components/Button" export const UserContext = createContext(null); export default function App(){ const reducer = (current_state, action) => { //current_state: 현재 배열 상태 //action: type(타입명: ADD / DEL) / xxx(추가되는 값) console.log(">>>" , current_state.filter((v,i) => v !== action.xxx)); switch(action.type){ case "A..

user-context import { createContext } from "react"; export const UserContext = createContext(""); App import { useState } from "react" import Profile from "./components/Profile" import {UserContext} from"./store/user-context" export default function App(){ const [username, setUsername] = useState("Mike"); return ( App {/* epxport const UserContex = createContext(""); */} ) } Greeting import { us..

import { useReducer, useState } from "react"; //1. useReducer와 useState 등록 export default function App() { const reducer = (current_state, action) => { //current_state: 현재 배열 상태 switch (action.type) { //action: { type: "타입명", item: 추가되는 값 } case "INCREMENT": //type명이 INCREMEMT인 경우 return [...current_state, action.item]; //기존 배열에 신규 값 추가 case "DECREMENT": //type명이 DECREMENT인 경우 //기존 배열에서 신규값과 같지 ..

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..