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 ); }..

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

내년쯤 다시 볼지 모르니 기록하자. https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org redux-toolkit으로 여러가지 해결(?)되었다고 한다. npm install react-redux @reduxjs/toolkit createSlice를 쓰면 name/reducer형태의 action.type을 자동으로 생성해 준다. action의 reducer를 export,사용하는 콤포넌트에선 import 후 dispath하면 된다. 이전 방식 dispath({typ..