React(23)
-
node + Express 서버에 리엑트 프로젝트 띄우기
node.js로 웹 서버 만들기 1. node.js 설치 2. 작업폴더 만든 후 에디터로 오픈 3. server.js 파일 만들고 아래 코드 작성 const express = require('express'); const path = require('path'); const app = express(); app.listen(8080, function(){ console.log('listening on 8080'); }); 4. 터미널 열어서 npm init -y 입력 5. npm install express 입력 이렇게 하면 웹 서버 만들기 끝 서버 미리보기를 띄우고 싶으면 터미널에 nodemon server.js 입력 nodemon이 설치되어 있지 않다면 node server.js 입력 리액트 프로젝트..
2023.02.25
-
느린 컴포넌트 성능 향상 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
-
상태관리 라이브러리 Reducx
Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리다. Redux를 설치하면 JS 파일 하나에 state를 보관할 수 있는데, 이걸 모든 컴포넌트가 직접 꺼내 쓸 수 있다. 그래서 props 문법이 필요없어진다. 설치하기 https://ko.redux.js.org/introduction/getting-started/ Redux 홈페이지에서 설치하면 된다. 설치하기 전 확인사항 1 Redux를 설치하기 전, package.json에서 react와 react-dom의 버전을 확인해야 한다. 이 2가지 버전이 모두 18.1.X 이상이어야 Redux 사용이 가능하다. "react": "^18.1.0", "react-dom": "^18.1.0", 설치하기 전 확인사항 2 Red..
2022.11.12
-
React Axios
Ajax란? 서버에 GET, POST 요청을 할 때 새로고침 없이 비동기적으로 데이터를 주고받을 수 있게 도와주는 간단한 브라우저 기능이다. 방법 3가지 Ajax로 GET/POST를 요청하는 방법은 3가지가 있다. 1. XMLHttpRequest 라는 옜날 문법 쓰기 2. fetch() 라는 최신 문법 쓰기 3. axios 같은 외부 라이브러리 쓰기 (추천) Axios를 설치해보자 https://axios-http.com/kr/docs/intro 터미널 열어서 npm 명령어를 입력한다. npm install axios Ajax GET 요청하는 법 1. axios를 상단에 import 하고 2. axios.get(url) 로 요청을 한다. 3. 가져온 데이터를 사용한다. import axios from '..
2022.11.12