본문 바로가기

분류 전체보기525

[React] react-router-dom 6.4 Router.tsx import {createBrowserRouter, Route, Routes} from "react-router-dom"; import Header from "./components/Header"; import Home from "./screens/Home"; import About from "./screens/About"; import Root from "./Root" const router = createBrowserRouter([ { path:"/", element: , children: [ { path:"about", element: } ] } ]) export default router; index.tsx import React from 'react'; import React.. 2023. 8. 24.
[React] react memo export default React.memo(DragabbleCard); - react.js한테 prop이 바뀌지 않는다면 컴포넌트를 렌더링 하지 말라고 한다. - react에게 prop이 변하지 않았다면 DragabbleCard를 다시 렌더링하지 말라고 하는거다. react memo는 prop를 바꾼 경우 그 item들만 다시 렌더링 된다. -불필요한 재렌더링이 너무 많아 최적화를 필요로 한다.그때 필요한 기능이다. 2023. 8. 24.
[Recoil] atom, selector # atom atom은 상태 한개의 단위를 의미한다. atom을 불러오기 위해서는 useRecoilState라는 훅을 사용한다. export const wonState = atom({ key: "wonState", default: 0, }); # selector - key값을 선언해주고 get이라는 요소가 들어간다. 값을 처리할 함수라고 생각하면 된다. 하지만 무조건 어떤 값을 return 해줘야한다. -get function을 이용하면 selector 내부에 여러 atom들을 가져올수 있다. export const dollarState = selector({ key: "dollarState", get: ({ get }) => get(wonState) / 1400, set: ({ set }, dollar.. 2023. 8. 23.
[TS] event.currentTarget.value event: React.FormEvent 이렇게 해서 이 함수가 InputElement에 의해서 실행될것을 아는거다. const onChange = (event: React.FormEvent) => console.log(event.currentTarget.value); 타입스크립트에서는 event.target.value가 아니고 event.currentTarget.value 이거 해주면된다. 2023. 8. 20.

티스토리툴바