DBILITY

react는 state(data)가 변경될때마다 그에 따라 Component를 다시 렌더링한다. 다시 그린다고 생각하자. 확인하고 싶으면 크롬 확장프로그램 React Developer Tools를 설치하고 다음과 같이 설정해 보면 확인 가능하다. 다음과 같이 테스트용 App을 작성했다. App에 button click event와 Child Component가 있다. import React, {JSX, useEffect, useState} from 'react'; import './App.css'; function App(): JSX.Element { const [date, setDate] = useState(new Date()); return ( setDate(new Date())}>Click ); }..

browser 개발자도구의 Application tab을 봄ㄴ Storage안에 있다. 최대 5Mbyte 문자만 저장 가능하다. clear하지 않는 이상 남아 있음. 오버가 되면? 뭐 알아서 지워지지 않을까? browser console에서 직접 해보니 다음과 같다. object나 array는 json으로 저장하면 된다. string으로 저장했다가 다시 변환하면 된다. 다음 id라는 키값을 중복없이 data에 배열로 저장하는 typescript 예다. let data = JSON.parse(localStorage.getItem("data") || "[]"); if (data.find((value: string): boolean => value === id) === undefined) { data.push..

REACT_APP_변수명으로 작성해야 사용할 있다. 사용할때는 jsx에서 process.env.REACT_APP_SHOP_NAME

import하거나 public 폴더에 두거나 vue3와 마찬가지로 require로 동적으로 불러 올 수 있다. 이런 것도 기억을 못한다. https://create-react-app.dev/docs/using-the-public-folder Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. create-react-app.dev

nextjs에서도 당연히 사용 가능하다. ToastContainer 콤포넌트를 삽입하고 사용하면 된다. 표시영역인가보다. .toast_alert { background: #ecaa12 !important; color: white !important; font-weight: bold } toast.warning("입력값을 확인하세요", {className: "toast_alert", theme: "colored"}); https://fkhadra.github.io/react-toastify/introduction React-toastify | React-Toastify [![Financial Contributors on Open Collective](https://opencollective.com/reac..