본문 바로가기

💻WEB FrontEnd/프레임워크 React

(20)

PWA(Progressive Web App) PWA(Progressive Web App) 웹사이트를 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 일종의 웹개발 기술 (장점) 1. 스마트폰, 태블릿 바탕화면에 여러분 웹사이트를 설치 가능합니다. (저거 설치된 앱 누르면 상단 URL바가 제거된 크롬 브라우저가 뜹니다. 일반 사용자는 앱이랑 구분을 못함) 2. 오프라인에서도 동작할 수 있습니다. service-worker.js 라는 파일과 브라우저의 Cache storage 덕분에 그렇습니다. 자바스크립트로 게임만들 때 유용하겠네요. 3. 설치 유도 비용이 매우 적습니다. 앱설치를 유도하는 마케팅 비용이 적게들어 좋다는 겁니다. 구글플레이 스토어 방문해서 앱 설치하고 다운받게 하는건 항상 매우 높은 마케팅비용이 듭니다. 근데 PWA라면 웹사이..

성능개선(3) - batching, useTransition, useDeferredValue batching - state변경함수를 연달아서 3개 사용하면 재렌더링도 원래 3번 되어야하지만 리액트는 똑똑하게도 재렌더링을 마지막에 1회만 처리해준다. 이런 재렌더링 방지기능을 batching이라고 한다. - 근데 문제는 ajax요청, setTimeout안에 state변경함수가 있는 경우 batching이 일어나지 않는다. 리액트 17버전까진 그런 식으로 일관적이지 않게 동작했는데18버전 이후 부터는 어디 있든 간에 재렌더링은 마지막에 1번만 된다. - batching 되는게 싫고 state변경함수 실행마다 재렌더링시키고 싶으면 flushSync라는 함수를 쓰면 된다. setCount(1) setName(2) setValue(3) //여기서 1번만 재렌더링됨 useTransition useTransi..

성능개선(2) - 재렌더링 막는 법 컴포넌트가 재렌더링되면 거기 안에 있는 자식컴포넌트는 항상 함께 재렌더링된다. 이런 재렌더링을 막고 싶을 땐 자식을 memo로 감싸놓으면 된다. memo()로 컴포넌트 불필요한 재렌더링 막기 step 1) memo를 'react' 라이브러리로부터 import 해와서 step 2) 원하는 컴포넌트 정의부분을 감싼다. 근데 컴포넌트를 let 컴포넌트명 = function( ){ } 이런 식으로 만들어야 감쌀 수 있다. import {memo, useState} from 'react' let Child = memo( function(){ console.log('재렌더링됨') return 자식임 }) function Cart(){ let [count, setCount] = useState(0) return ( ..

성능개선(1) - lazy import lazy import - 리액트 사이트들은 첫 페이지 로딩속도가 매우 느릴 수 있는데 그게 싫다면 js 파일을 잘게 쪼개면 된다. - 쪼개는 방법은 import 문법을 약간 고치면 되는데 지금 페이지에서 사용하지 않고 있는 컴포넌트들은 lazy import 해놓으면 좋다. - 단점 : lazy문법으로 import한 컴포넌트들을 로드할 때는 로딩시간이 발생할 수 있다. 1. lazy() (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( () =..

react-query : 실시간 데이터가 중요할 때? ajax 요청하다보면 이런 기능들이 가끔 필요해진다. - 몇초마다 자동으로 데이터 다시 가져오게 하려면? - 요청실패시 몇초 간격으로 재시도? - 다음 페이지 미리가져오기? - ajax 성공/실패시 각각 다른 html을 보여주려면? 1. react-query 설치 & 셋팅 (terminal) npm install react-query (index.js) import { QueryClient, QueryClientProvider } from "react-query" //1번 const queryClient = new QueryClient() //2번 const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //3번 ); ..

localStorage 1. localStorage 문법 추가, 읽기, 삭제 문법 localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름') 2. localStorage에 array/object 자료를 저장하려면 문자만 저장할 수 있는 공간이라 array/object를 바로 저장할 수는 없다. 편법으로 array/object -> JSON 이렇게 변환해서 저장하면 된다. (JSON은 문자취급) JSON.stringify() 라는 함수에 array/object를 집어넣으면 그 자리에 JSON으로 변환된걸 남겨준다. localStorage.setItem('obj', JSON.stringify({name:'ki..

Redux (2) - state 변경 1. store의 state 변경하는 법 step 1) store.js 안에 state 수정해주는 함수 생성 - slice 안에 reducers : { } 열고 거기 안에 함수 만들면 된다. (함수 작명은 자유롭게) - 파라미터 하나 작명하면 그건 기존 state가 된다. - return 우측에 새로운 state 입력하면 그걸로 기존 state를 변경해준다. let user = createSlice({ name : 'user', initialState : 'kim', reducers : { //state 수정해주는 함수 changeName(state){ return 'john ' + state }, 수정함수2(state){ return ... }, } }) step 2) 생성한 수정함수(changeNam..

Redux (1) : props 없이 state 공유 가능 Redux Redux는 props 없이 state를 공유할 수 있게 도와주는 라이브러리이다. 1. Redux 설치 npm install @reduxjs/toolkit react-redux ※ redux toolkit : redux의 개선버전 (문법이 좀 더 쉬워짐) 근데 설치하기 전에 package.json 파일을 열어서 "react", "react-dom" 항목의 버전을 확인한다. 이거 두개가 18.1.x 이상이면 사용가능하다. ▲ 그게 아니면 직접 두개를 18.1.0 이렇게 수정한 다음 파일저장하고 터미널에서 npm install 누르면 된다. 2. Redux 셋팅 ① 아무곳(예를 들면, src 폴더 안)이나 state들을 보관하는 파일인 store.js 파일을 만들어서 아래 코드를 복붙해준다. (s..

Ajax로 서버와 통신 Ajax를 사용하려면 다음 세 가지 방법이 있다. XMLHttpRequest fetch() axios 1. axios 라이브러리 사용 1) axios 라이브러리 설치 npm install axios 2) App.js에 axios 라이브러리 import import axios from 'axios' 3) AJAX GET 요청하기 { axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{ console.log(결과.data) }) .catch(()=>{ console.log('실패함') }) //동시에 ajax 요청 여러개하려면 Promise.all( [axios.get('URL1'), axios.get('URL2')] ) }}>버튼..

컴포넌트의 Lifecycle 컴포넌트의 Lifecycle 컴포넌트가 실행되고 종료되는 과정을 특정 시점별로 나누어 둔 것 컴포넌트는 1. 생성이 될 수도 있고 (mount) 2. 재렌더링이 될 수도 있고 (update) 3. 삭제가 될 수도 있습니다. (unmount) Lifecycle Hook 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능(React State, Lifecycle Method)을 사용할 수 있도록 만들어주는 기능이다. Hook은 모두 use로 시작한다는 특징이 있다. 여러 컴포넌트에서 재사용 될 수 있는 로직이라면 사용자가 정의해서 만들 수 있다. => custom hooks 1) 클래스형 컴포넌트의 Lifecycle Hook class Detail2 extends React.Component { component..

이전 1 2 다음

티스토리툴바