안녕하세요

리액트 프로젝트를 만들었으면 html로 컴파일 npm run build // 프로젝트를 html 파일로 만들기 서버 만들기 앞서 package.json만들고 express 설치 npm init -y // default로 설정된 package.json 생성. -y는 'yes'를 의미한다. npm install express // express 설치 epress 서버 만들기 const express = require("express"); const path = require("path"); const app = express(); app.listen(8080, function () { console.log("listening on 8080"); }); 리액트와 ajax 통신 환경 설정하기 npm instal..

useTransition(): 렌더링을 나중에 하도록 할 수 있습니다. 원래는 input에 타이핑을 하면, 에 다 넣고 렌더링을 합니다. 그런데 startTransition 함수의 콜백함수에 넣은 state 변경함수는 나중에 처리가 됩니다. let [inputValue, setInputValue] = useState(""); let [isPending, startTransition] = useTransition(); { startTransition(() => { setInputValue(e.target.value); }); }} /> input에 타이핑이 되고 나서 안의 내용을 처리하기 시작합니다. => 실행시점을 후순위로 바꿔 UX를 상향하도록 합니다. isPending은 startTransition ..

memo 자식 컴포넌트 재렌더링 막기 렌더링에 시간이 오래 걸리는 컴포넌트는 memo로 필요할 때만 재렌더링 하도록 하는 것이 좋다 const ChildTemp = memo(() => { return ChildTemp; }); 항상 재렌더링 하도록 하지 않고 자식 컴포넌트에 전달된 props가 변할 때만 재렌더링하도록 하도록 한다. 모든 곳에 memo를 붙이면 props가 변했는지 비교하는 연산을 수행해야 하므로 오히려 시간이 더 걸린다. => 꼭 필요한 곳에만 쓰고 대부분 쓸 일이 없긴 하다. useMemo 컴포넌트 안의 함수 1회만 실행 useEffect와의 차이 useEffect는 html렌더링 이후 실행, useMemo는 렌더링 중에 실행 dependency가 변경되었을 때만 함수를 실행하도록 하..

Lazy Load 기능으로 import하기 특징 사이트를 발행할 때 하나의 js 파일로 생성되지 않고 별도의 파일로 분리되게 됩니다. 그러면 Datail 컴포넌트가 필요할 때가 되어야 로딩을 시작을 하게 되고 => 모든 페이지를 한 번에 로딩하지 않도록 하여 최초 로딩 시간을 줄여줍니다. 사용 방법 아래와 같은 형태로 컴포넌트를 import를 하여 페이지를 Lazy Load 할 수 있습니다. const Datail = lazy(() => import("./components/Detail.js")); 로딩중이라는 UI를 나타내려면 아래와 같이 로 감싸주면 됩니다. ;