REACT

React

nvm - node버전 node eol 노드버전이 안맞을때 nvm volta nvm volta : 패키지점 제이슨 fnm https://docs.volta.sh/guide/getting-started node versi

리액트 useState 클로저구조

리액트 초기세팅

AppRoutes.jsx import React, { Suspense, lazy } from 'react'; import { Route, Routes } from 'react-router-dom'; import styled from "@emotion/styled"; import BaseLayout from "layouts/base-layout"; const JoinPage = lazy( () => import("pages/join")) function AppRoutes() { return ( ); } function Loading() { const Wrapper = styled.div` /** BEGIN CSS **/ position: fixed; background: #fff; width: 100%; ..

useState 비동기 동작

리액트로 계산기 작업중 이해가 가지 않았던 코드부분이다. const onClick = (item) => { if (item.type === "number") { // 여기서 setCalc((prev) => {})부분이 이해가 가지 않았다. 어떻게 이전값을 가져올 수 있는지.. setCalc((prev) => { const inputValue = shouldSetNumberRef.current ? item.text : prev.inputValue.replace(/(^0+)/, "") + item.text; shouldSetNumberRef.current = false; return { ...calc, inputValue, }; }); } if (item.type === "operator") { switch..

calculator contextapi

calculator contextapi 사용하기 context > calculator.js import { createContext, useState, useRef } from "react"; 1. react패키지 createContext를 사용해 context생성 const CalculatorContext = createContext({ state: { inputValue: '', buttonArray: [] }, actions: { calculate: () => {} } }) 2. calculatorProvider 생성 contextProvider에는 하나의 value값으로 하나의 객체만 들어갈 수 있다. const CalculatorProvider = ({ children }) => { // 연산자..