본문 바로가기

부트캠프교육중301

[React] theme, globalstyled App.tsx import React from 'react'; import styled, { createGlobalStyle } from "styled-components"; import Router from './Router'; const GlobalStyle = createGlobalStyle` @import url('https://fonts.googleapis.com/css2?family=Hind&display=swap'); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, i.. 2023. 8. 24.
[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.

티스토리툴바