ショッピングモールプロジェクト(Memo、PWA、LocalStorage)

これはアップル社のスピーチに基づいた文章です.
上位エレメントからデータ書き込みを受信する下位エレメントが次のように存在する場合:

このとき,child 1コンポーネントの内容は尊朴から尊朴2に変更される.
データは再レンダリングされ、出力されます.
しかし、2つのchild 1 childは再レンダリングされます.
親構成部品を構成するstateまたはpropsの値が変化すると、関連するすべての部品が再レンダリングされます.

memo()

不要な再レンダリングを阻止する関数

memo関数をインポートします.

import React, {useEffect, memo} from 'react';

再レンダリング不要な関数をmemo()関数で囲みます.

let Child2 = memo(function(){
  useEffect( ()=>{ console.log('렌더링됨2') } );
  return <div>2222</div>
})

このとき関数宣言を変数宣言に変更すればよい.

function 함수(){}
let 함수 = function(){ }

propsが非常に膨大で大きな場合、損失をもたらす可能性があることに注意してください.
既存の支柱と交換した支柱を比較演算する.支柱が大きく複雑であれば、この過程自体も負担になるからだ.

PWA

Progression Webアプリケーション:新しい強力なソフトウェアアプリケーションの作成方法
1.スマホやタブレットのデスクトップにWebサイトをインストールできる
2.オフラインでも動作可能
3.誘導設置費用が低い.
HTML、CSS、JSを使用して作成されたWebアプリケーションを、現代のWebブラウザAPIと組み合わせることで、プラットフォーム間で実行されるアプリケーションを簡単に作成できます.
つまり、WebサイトやWebアプリケーションをすでに作成している場合は、デスクトップやモバイルデバイス上で実行できるアプリケーションをいくつか追加するだけです.
AndroidやiPhoneなど、特定のプラットフォームで動作するネイティブアプリケーションのようなさまざまなAPIを利用してユーザーにさまざまな機能を提供しているが、欠点はアプリケーションストアを利用してインストールする必要があり、そのプラットフォームでしか使用できないことだ.
逆に,ブラウザで実行されるWebアプリケーションの利点は,プラットフォームにかかわらずブラウザがあれば利用できるため,容易にアクセスできるが,ネイティブアプリケーションのようにプラットフォーム自体のAPIを使用できないことである.

以前に作成したプロジェクトがpwaベースのテンプレートではない場合は、まず新しいプロジェクトを作成し、コピーして貼り付けます.(ライブラリのインストール図)

 npx create-react-app 프로젝트명 --template cra-template-pwa

index.jsからregisterに変更します.以下に示します.
では糸build/npm runbuildの時manifestjsonとservice-worker.jsファイルは自動的に生成されます.ただし、上からpwa形式の項目で、2つのファイルが存在します.(2つのファイルはPWAで必要)

serviceWorkerRegistration.unregister();
-> 
serviceWorkerRegistration.register();

manifest.jsonファイルには、Webアプリケーションの情報が表示されます.(アイコン、名前、テーマカラー)

{
  "version" : 버전.. 예를 들면 1.12",
  "short_name" : "설치후 앱런처나 바탕화면에 표시할 짧은 12자 이름",
  "name" : "기본이름",
  "icons"(src) : { 여러가지 사이즈별 아이콘 이미지 경로(운영체제에 따라) },
  "start_url" : "앱아이콘 눌렀을 시 보여줄 메인페이지 경로",
  "display" : "standalone(상단바 제거) 아니면 fullscreen",
  "background_color" : "앱 처음 실행시 잠깐 뜨는 splashscreen의 배경색",
  "theme_color" : "상단 탭색상 등 원하는 테마색상",
}

service.-worker.jsファイルは、ハードディスクに項目内のCSS、JS、HTML、画像ファイルなどをインストールするかどうかを決定します.つまり、アプリケーションはリクエストファイルではなくオフラインで使用でき、キャッシュストレージにキャッシュとして格納されます.

生成されたbuildファイルを個別のvisualstudioコードで開き、liver serverを開いて正常に動作していることを確認できます.(「インストール」ボタンがポップアップされていることも確認できます)

LocalStorage

更新後、JSファイルは再読み込みされるため、実装された機能はリセットされます.
したがって、サーバにデータを格納する必要がある場合は、LocalStorageを使用してブラウザに情報を格納できます.
localSotorage構文

localStorage.setItem(「データ名」、「データ」)

は、次のようにキー値として保存されます.

localStorage.getItem(「データ名」);

「データ名」の値を以下のように出力します.

localStorage.removeItem(「データ名」)

データはローカルストレージから削除されます.

localStorageにオブジェクトまたは配列を格納する場合は、すぐに保存できません.
localStorageはテキストデータのみを格納できるため、JSON形式に変更して保存する必要があります.
JSON.stringfy()を関数として識別します.
localStorage.setItem('obj', JSON.stringify({name:'kim'}) );

また、保存したデータを出力したいのですが、そのまま出力するとJSON形式で出力されるので、再度オブジェクト化する必要があります.
JSON.オブジェクトをparse()で置き換えます.

適用

もしあなたが商品をクリックしたら、最近の本商品のブロックにその商品に関する情報を見せてほしいですか?
すなわち、a商品をクリックし、c商品をクリックし、b商品をクリックし、最近本商品はa,c,bの順に出力される.
商品をクリックするために、a商品をクリックして商品ソートページに入り、b商品をクリックします.このとき、ブラウザが自動的に更新され、次の商品をクリックすると、前に見た商品のデータが消えてしまいます.そのため、サーバを介して商品アクセス記録をデータ化し、サーバがない場合はlocalStorageという一時的な期間を使用する必要があります.
大体のUI構成は以下の通りです.

プレイヤーは商品をクリックして商品の詳細ページに入ります.

は、この時点でローカルストレージのデータを抽出する.
△最初の商品をクリックした場合、もちろんデータはありません.

で取り出したデータは、「[]」のようにJSON形式で出力されるため、引用符は削除されます.

および出力された配列フォーマットのデータ空間では、現在の商品のid値がプッシュされる.

紹介する商品が以前にもアクセスした商品であれば、配列中に存在するデータであるため、重複を解消することができる.

最後のストレージアレイデータ空間をlocalStorageに戻します.

ページに入る場合は、構成部品を実行または更新する場合と同じであるため、UserEffect()が使用される.

//Detail함수 내부
useEffect( ()=>{
}, [] );

「watched」のキー値を持つ配列データを取り出します.

//Detail함수 내부
useEffect( ()=>{
  var arr = localStorage.getItem('watched');
}, [] );

で取り出した配列JSON.parseで並べ替えます.

//Detail함수 내부
useEffect( ()=>{
  var arr = localStorage.getItem('watched');
  arr = JSON.parse(arr);
}, [] );

id値を

配列にプッシュします.

useEffect( ()=>{
  var arr = localStorage.getItem('watched');
  arr = JSON.parse(arr);
  arr.push(id);
}, [] );

アレイの重複データを削除します.

useEffect( ()=>{
  var arr = localStorage.getItem('watched');
  arr = JSON.parse(arr);
  arr.push(id);
  arr = new Set(arr); //Set이라는 함수를 새로운 객체로 선언
  arr = [...arr]; // 다시 원래의 arr에 깊은 복사
}, [] );

最後にローカルストレージ

に保存する.

//Detail함수 내부
useEffect( ()=>{
  var arr = localStorage.getItem('watched');
  arr = JSON.parse(arr);
  arr.push(id);
  arr = new Set(arr);
  arr = [...arr];
  localStorage.setItem('watched', JSON.stringify(arr) );
}, [] );

商品をクリックすると、商品のid値が順番に並べ替えに格納されます.