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

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

ssr framework다. java에 vadin framework이 있는데 차라리 그게 나을지도..ㅎㅎ 반백살에 공부해두나 쓸일이 없다.꼰대라 그런가 성격이 나빠서 그런가 갑질을 거부해서 그런가^^ 다들 typescript를 쓰는데, 나는 아직 익숙하지 않다. https://nextjs.org/docs Docs | Next.js Using App Router Features available in /app nextjs.org 나는 intellj idea를 사용한다. new project > Generators > React > project type Next.js > create-next-app 선택 후 생성한다.(현재시점 13.4.2) Next.js 13.4. The App Router is now ..

내년쯤 다시 볼지 모르니 기록하자. 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..

https://styled-components.com/ styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅🏾 styled-components.com 외부에 css,scss를 만들고 id,class로 참조하지 않고, 콤포넌트 내부에서 콤포넌트를 이름을 사용하는 것처럼 지정하는 것이다. 말이 복잡하다. 내부에 있기 때문에 전역적으로 중첩(꼬이는ㅋㅋ)되지 않게 사용할 수 있다. 이게 전부인가? 일단 설치한다. npm install styled-components 콤포넌트내에서 사용할 style을 대충 만들어 본다. import styl..