[React 코딩애플🍎] 프로젝트 shop

🍎 LocalStorage

• 페이지 새로고침 했을 때 state 초기값으로 돌아가는데 그것을 방지하기 위해 state를 서버로 보내서 DB에 영구저장 하는 것

1. key/value 형태로 저장가능
2. 최대 5MB까지 문자 저장이 가능하다
3. 사이트 재접속해도 남아있으나 브라우저 청소하게 되면 삭제된다

⭐ LocalStorage 와 SessionStorage 차이

• LocalStorage는 재접속해도 데이터가 남아있으나 SessionStorage는 브라우저를 껐을 때 데이터가 사라진다

⭐ LocalStorage 데이터 저장/출력/삭제

//console.log에서 확인하기

//데이터 추가
localStorage.setItem('이름', '값')

//데이터 불러오기
localStorage.getItem('이름')
'값' // 값이 출력된다

//데이터 삭제
localStorage.removeItem('이름') //localstorage에서 삭제된 것을 확인할 수 있다

• 데이터 수정하는 문법이 없어서 getItem으로 꺼내서 수정하고, 다시 저장하면 된다
• 배열/객체는 저장이 안 되고, 문자만 저장이 가능하다
• 배열/객체 저장이 안 되기 때문에 JSON으로 바꾸면 문자로 취급되기 때문에 저장이 가능하다

//배열/객체를 JSON으로 변환하는 방법

const obj = { name: "kim" };
  localStorage.setItem("data", JSON.stringify(obj)); 

• 객체를 JSON으로 변환했기 때문에 localstorage에 저장이 된 것을 확인할 수 있다. 이러한 방법의 단점으로는 getItem으로 꺼내보면 JSON으로 변환되서 문자로 변경 되어있다. 그렇기 때문에 객체에 접근을 객체 문법으로 하지 못한다 다시 객체로 되돌리려면 아래 코드를 참고하자

//JSON을 배열/객체로 변환하는 방법

 JSON.parse(obj); 

---

🍎 React Query

• 실시간으로 데이터를 계속 가져와야 하는 사이트를 만들 때 사용하면 좋다

⭐ <React Query 장점>

• ajax 성공/실패/로딩중 일 때 파악하기 쉽다
• ajax 요청을 알아서 재요청 해준다
• 실패 시 재시도 해준다
• ajax로 가져온 결과는 state 공유를 하지 않아도 된다

⭐ <React Query 설치>

1. 설치방법 ➡️ npm install react-query@3
2. react-query로 import 하기

import { QueryClient, QueryClientProvider, useQuery } from 'react-query' //import 하기

2. 작명하기

useQuery(['작명'], // [] 생략하면 안 됨

3. index.js 파일에 서 1번, 2번, 3번 작성하기

import { QueryClient, QueryClientProvider } from "react-query"  //1번
const queryClient = new QueryClient()   //2번

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <QueryClientProvider client={queryClient}>  //3번
    <Provider store={store}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </Provider>
  </QueryClientProvider>
); 

⭐ <React Query로 Ajax 요청하는 법 >

//App.js

`{ // 데이터 내용
  "name" : "Mark",
  "email" : "mark123@gmail.com"
}`

let result = useQuery('작명', ()=>
    axios.get('https://codingapple1.github.io/userdata.json')
    .then((a)=>{ return a.data })
  )

<Nav className="ms-auto">
   {result.isLoading && "로딩중"} // isLodading이면 "로딩중" 보이게, 아래도 같은 기능
   {result.error && "Error"}
   {result.data && result.data.name}
</Nav>

---

🍎 lazy import

• 리액트는 Single Page Application이다 특징은 html, js파일이 하나만 생성된다 그 안에 지금까지 만든 App.jsx, Detail.jsx 등 모든 내용이 들어 있어서 파일 사이즈가 크다 그래서 리액트 사이트들은 첫 페이지 로딩속도가 많이 느릴 수 있다 그것을 방지하기 위해 js파일의 import문법을 고치면 되는데 아래 코드 참고 !

import { createContext, lazy, useEffect, useState } from "react"; //lazy import 하기

// import Detail from "./routes/Detail"; // 이렇게 작성하면 파일 사이즈가 크고 로딩속도가 느려짐
// import Cart from "./routes/Cart";

const Detail = lazy(() => import("./routes/Detail")); 
const Cart = lazy(() => import("./routes/Cart"));

• lazy 문법은 똑같이 import가 가능하지만 Detail, Cart파일이 필요 할 때 import가 되게 해준다. 이렇게 작성하게 되면 첫 페이지 로딩속도를 빠르게 향상 시킬 수 있다

• lazy 사용하면 컴포넌트 로드까지 지연시간이 생길 수도 있다 그럴 때에는 아래 코드 처럼 지연시간동안 보여질 html을 만들면 된다

<Suspense fallback={<div>로딩 중 입니다 ...</div>}> //지연시간 발생할 때 로딩중입니다 화면 보여짐 
  <Routes>
	<Route
      path="/detail/:id"
      element={<Detail shoes={shoes} />
	<Route 
	  path="cart" 
	  element={<Cart />} />
  </Routes>
</Suspense>

• Detail 컴포넌트가 지연 중 일때만 보여지게 해도 되지만 <Suspense>로 <Routes>를 전부 감싸도 된다

---

🍎 memo

• memo는 컴포넌트가 필요할 때만 리렌더링 해주기 때문에 부모의 값이 바뀌어도 리렌더링이 되지 않는다

• memo의 원리는 Child의 프롭스가 변할 때만 리렌더링을 해준다

• ❗memo 단점은 불필요한 리렌더링을 막기 위해서 기존 props === 바뀐 props 를 비교하는 연산을 하고, 실행하는 특징이 있는데 props가 만약에 크고 복잡하면 속도 지연되기 때문에 꼭 필요한 곳에만 사용한다

//Cart.jsx

import { memo, useState } from "react"; // memo import 하기

const Child = memo(() => { //Child 컴포넌트 memo() 감싸주기
  console.log("리렌더링"); // Child의 props가 변할 때만 출력
  return <div>자식요소</div>;
});
return (
    <>
      <Child count={count}/> // props전달
      <Button
        onClick={() => {
          setCount(count + 1);
        }}
        variant="secondary"
      >
        +
      </Button>

🍎 usememo

• useEffect와 비슷한 용도이다. 다른 점은 실행시점의 차이 밖에 없다 usememo가 실행 될 때 함수도 동시에 실행되기 때문에 컴포넌트 생성 시 1회만 실행하고 싶은 코드가 있을 때 사용한다
• dependency도 있기 때문에 특정 state, props가 변할 때만 실행 할 수도 있다
  

---

🍎 automatic batching

• 리액트에서는 state 변경함수가 연달아서 3개이상 있다고 가정했을 때 리렌더링이 3번 되어야 하지만 리렌더링을 마지막에 1회만 처리해주는 리렌더링 방지 기능이다

  ❗리액트 17버전에서는 ajax요청, setTimeout안에 state 변경함수가 여러개 있는 경우에는 batching이 일어나지 않는다
  하지만 ❗리액트 18버전에서는 batching이 적용된다

🍎 useTransition, useDeferredValue

• 리액트 18버전 이후부터 추가된 기능이다. 렌더링 성능이 저하되는 컴포넌트에서 사용할 수 있다

⭐ useTransition

• 오래 걸리는 컴포넌트 부분을 useTransition로 감싸면 렌더링 할 때 버벅거리지 않게 해준다 (보통은 코드 실행시점만 조절 해준다 ! )

import {useState, useTransition} from 'react'

let a = new Array(10000).fill(0) //성능 저하를 일으키는 10,000개 배열

function App(){
  let [name, setName] = useState('') //사용자가 입력하는 데이터
  let [isPending, startTransition] = useTransition()
  
  return (
    <div>
      <input onChange={ (e)=>{ 
        startTransition(()=>{ //오래걸리는 코드 감싸주기
          setName(e.target.value) //코드 시작을 뒤로 늦춰준다
        })
      }}/>

      {
        isPending ? "로딩중..." : // startTransition() 으로 감싼 코드가 처리중일 때 true로 변하는 변수
        a.map(()=>{ // 변수 a 먼저 보여줌
          return <div>{name}</div>
        })
      }
    </div>
  )
}

⭐ useDeferredValue

• useDeferredValue() 안에 state를 넣으면 state가 변동사항이 있을 때 나중에 처리해주는 기능이다 (startTransition과 용도가 똑같다)

import {useState, useTransition, useDeferredValue} from 'react'

let state1 = useDeferredValue(name)

➕ 한 페이지에 html태그가 엄청나게 많이 있어서 성능이 저하된다면 html 태그들을 페이지 여러개에 나눠놓는 게 좋다

---

🍎 PWA (progressive Web App)

• 안드로이드/iOS 모바일 앱처럼 사용할 수 있게 만드는 웹개발 기술이다.
• 앱으로 발행하는 게 아닌 웹사이트 자체를 스마트폰 홈 화면에 설치하는 것을 PWA라고 한다
• 웹사이트를 PWA화 시키면 좋은 점이 몇가지 있다 스마트폰 바탕화면에 웹사이트 설치가 가능하고, 오프라인에서도 동작이 가능하다. 그리고 스토어에 들어가서 앱을 설치하고 다운받게 하기 까지의 마케팅 비용이 많이 들어가는데 PWA는 방문자들에게 간단한 팝업을 띄워서 설치 유도를 할 수 있게 때문에 마케팅 비용이 적게 들고, 미국에서는 실제로도 PWA를 이용하고 있는 쇼핑몰들이 많다

⭐ PWA 발행

• 아래 파일들을 자동으로 생성을 원하다면 프로젝트를 처음 만들 때 터미널에 입력해야 한다
  ➡️ npx create-react-app 프로젝트명 --template cra template-pwa

  manifest.json service-worker.js 파일 자동생성

• index.js 하단에서 코드를 바꿔주고 터미널에 yarn build/npm run build 둘 중 하나를 입력하면 파일이 자동생성 된다

// 이 코드를 아래처럼 바꿔주기
serviceWorkerRegistration.unregister();

//아래처럼 바꿔주기
serviceWorkerRegistration.register();

⭐ manifest.json 파일

• 웹앱의 아이콘, 이름, 테마색 등을 결정하는 파일이다
  

⭐ service-worker.js

• 필요한 이미지, 데이터를 서버에 요청하는 게 아니라 Cache Storage에 저장되어 있던 HTML, CSS, JS 파일을 사용한다

프로젝트가 PWA인 지 확인하는 방법은 미리보기 창으로 사이트에 접속해서 개발자도구 > Application탭 > manifest.json, service-worker.js 파일에 대한 내용을 확인할 수 있다

---

🍎 sync / async

• 동기방식(synchronous)은 자바스크립트 코드를 적은 순서대로 위에서 부터 아래로 코드가 실행되는 것을 말한다

• 비동기 방식(asynchronous)은 ajax, 이벤트리스너, setTimeout 이런 함수들을 사용할 때 발생하는데 함수들은 코드 실행시간이 오래걸려서 처리시간이 길어진다 그렇게 때문에 위에서 부터 아래로 실행되지 않고 완료되는 대로 실행된다

• setState 함수 특징

// state 변경함수들은 전부 비동기적으로 처리된다 (setName)
const [name, setName] = useState('kim')

// setName()이 오래걸리면 이것부터 실행하는 게 아니라 밑에 있는 코드들 부터 실행이 된다

🍎 Node+Express 서버와 React 연동

• 서버와 연동하는 방법은 쉽게 말해서 유저가 메인페이지로 접속했을 때 리액트로 만든 html 파일을 전송해주면 연동이 된다

• Node+Express로 임시서버 만드는 방법

1. node.js 설치
2. 폴더 만들고 server.js 파일 만들고, 아래코드 작성해서 서버 생성

//server.js

const express = require('express');
const path = require('path');
const app = express();

app.listen(8080, function () {
  console.log('listening on 8080')
}); 

3. 터미널 입력 ➡️ npm init -y
4. 터미널 입력 ➡️ npm install express

• 웹서버가 만들어진다 서버를 미리보기로 확인하고 싶으면 터미널 입력 ➡️ node server.js

요약 ) 리액트 프로젝트 만드는 순서

• npx create-react-app 프로젝트명
• 프로젝트 생성되면 리액트 문법으로 만들고 싶은 프로젝를 만들고 미리보기 띄우기로 확인하고 싶을 때 (npm run start) 터미널에 입력하면 된다
• 프로젝트가 완성되면 npm run build 입력 하면 html 파일이 build 폴더에 생성이 된다
• html 파일을 서버에서 필요할 때 유저에게 보내주면 된다

//server.js

//'react-project/build' 작성해야 특정 폴더의 파일을 전송할 수 있다
app.use(express.static(path.join(__dirname, 'react-project/build')));

app.get('/', function (요청, 응답) { // 메인페이제에 유저가 접속했을 때
 응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));//파일경로
 // '/react-project/build/index.html' > index.html 파일 보내주기
});

• 여러 페이지 만들고 싶을 때에는 리액트 라우터를 사용한다

 //server.js

app.use(express.static(path.join(__dirname, 'react-project/build')));

app.get('/', function (요청, 응답) { 
  응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));
  
app.get('*', function (요청, 응답) { //최하단에 작성 (*는 모든 문자를 의미)
  응답.sendFile(path.join(__dirname, '/react-project/build/index.html'));
});

코딩애플 리액트