느린 컴포넌트 성능 향상 useTransition, useDeferredValue

react 18 버전에서 새롭게 추가된 hook이 있다. useTransition useTransition을 사용하면 동작이 느린 컴포넌트들을 혁신적으로 빠르게 동작시킬 수가 있다. // App.js import { useState } from "react"; function App(){ let [name, setName] = useState(''); let arr = new Array(10000).fill(0);// 0이 10000개 담긴 arr return ( { setName(e.target.value) }} /> { arr.map(()=>{ return {name} }) } ) } input에 유저가 글을 입력하게 되면 그 값을 name 이라는 state에 저장한 후 arr의 갯수(10000개)만..

2022.12.11

불필요한 재 렌더링을 막으려면 memo, useMemo

리액트에서 컴포넌트가 재 랜더링되면 안에 있는 자식 컴포넌트도 항상 함께 재랜더링된다. 이것은 리액트의 특징인데, 만약 자식컴포넌트의 랜더링 시간이 무거운 컴포넌트라면, memo 함수를 통해 재랜더링을 막아줄 수 있다. memo() import { memo, useEffect, useMemo, useState } from 'react'; let Child = memo( function (props){ useEffect(()=>{ console.log("Child") }) return child }) function Cart(){ return ( ) } memo 함수에 들어있는 함수는 꼭 필요할때만 재 랜더링 된다. 꼭 필요할 때란? Child 컴포넌트에 전달되는 props가 변할 때 하지만, 이전 pro..

2022.12.11

lazy import 코드분할과 Suspense

리액트에서 빌드를 하게되면 html, js 파일이 1개만 생성된다. 그 안에 지금까지 만든 컴포넌트 내용들이 들어있어 파일 사이즈가 크다. 그래서 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데, 이 현상을 해결하려면 JS파일을 잘게 쪼개면 된다. 쪼개는 방법은 import 문법을 약간 수정하면 된다 (App.js) import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' 위 코드를 으래 코드로 수정하면 된다. (App.js) import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Deta..

2022.12.11

실시간 데이터가 중요하다면 react-query

react-query? react-query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러 핸들링 등 비동기 과정을 더욱 편하게 하는데 사용된다. 여러가지 장점이 있지만 주로 아래와 같이 프론트 개발자가 구현하기 귀찮은 일들을 수행한다. 몇초마다 자동으로 데이터를 다시 가져온다. 요청 실패시 몇초 간격으로 재시도할 때 다음 페이지를 미리 가져올 수 있다 ajax 성공 / 실패 시 각각 다른 html을 보여준다. 직접 개발해도 되지만, react-query 라이브러리를 사용하면 편리하게 구현할 수 있다. SNS, 코인거래소 같은 실시간 데이터를 보여줘야 하는 사이트에서 유용하다. react-query 사용하기 1. 설치하기 npm install @tanstack/react-query 2..

2022.12.11

CSS 방법론

현재 CSS 방법론이라고 사람들이 말하는 것은 크게 3가지로 구분됩니다. 해당 방법론이 무엇이고 어떠한 장점과 단점을 가지고 있는지 알아봅니다. 3가지 방법론 중 무엇 하나 정답이라고 말할 수 없으며 공부를 하다 보면 자신에게 맞는 방법론이 보이게 됩니다. 그 방법론을 프로젝트에 맞게 또 공통 가이드화 하여 협업이 용이하게 사용하는게 더 중요합니다. 왜 CSS 방법론을 사용할까요? 협업 시 사람마다 다른 코드 구조 및 스타일 정의 (방법론을 사용하는 이유는 첫 번째 이유가 가낭 크다고 생각합니다.) 서로 다른 네이밍 규칙 유지보수가 어려운 코드 타인이 작성한 코드를 이해하고 분석하는데 드는 시간의 증가 복잡해지는 선택자 등 위 이유 이외에도 추가적으로 더 있을 수 있다. 코드의 규칙성(획일성)을 확보하기..

2022.12.07

google webFont loader

google web font loader CSS가 로드되기 전에 폰트가 로드되길 원하고, 스타일되지 않은 텍스트가 번쩍거리지 않게 하려면 웹 폰트 로더를 사용하라. 웹 폰트 로더는 사이트가 로드되기 전에 로드되고, 스타일되지 않은 텍스트가 번쩍이는 것을 확실하게 방지한다. 비동기 스크립트도 사용할 수 있지만, 폰트가 먼저 로드되는 것을 확실하게 하기 위해 동기 스크립트를 사용하는 것이 좋다. 사용하기 Web Font Loader 라이브러리를 사용하려면 페이지에 포함하고 로드할 글꼴을 지정하기만 하면 된다. Web Font Loader는 jsDelivr 및 CDNJS CDN에서도 사용할 수 있다. https://www.jsdelivr.com/package/npm/webfontloader https://gi..

2022.12.07