WebDevCurriculum]Reactベースのファイルシステム実装-txt/imageの読み込み

1.概要

2.コア

3.全体ロジック

4-1. App.js-ルーティング構造構成

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from '../routes/Home.js';
import Detail from '../routes/Detail.js';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" exact={true} element={<Home/>} />
        <Route path="/:userID" element={<Detail/>}/>
      </Routes>
    </Router>
  );
}

export default App;

4-2. Home.js-ユーザーデータ入力とローカルストレージデータ転送

const [userID, setUserID] = useState('');
const [userPW, setUserPW] = useState('');

setUserID(value);
setUserPW(value);

 <input type='text' placeholder="ID" value={userID} onChange={updateUserID}/>
 <input type='password' placeholder="PW" value={userPW} onChange={updateUserPW}/>
   
   
<Link to={{
                pathname: `/${userID}`
            }} onClick={() => saveStateValues(userID, userPW)}>로그인하기</Link>

import React, {useState} from 'react';
import {Link} from 'react-router-dom';
import {gql, useQuery} from '@apollo/client';
import styled from 'styled-components';

const dataContext = React.createContext();

const Container = styled.div`
`

const Title = styled.h1`
    padding: 1%;
    align-items: center;
`

const UserInformation = styled.div`
    display: flex;
`

function Home() {

    const [userID, setUserID] = useState('');
    const [userPW, setUserPW] = useState('');

    const updateUserID = e => {
        const {target : {value}} = e;
        //value 변수 자체는 문자 하나하나
        //각각 입력될때마다 반응

        setUserID(value);
        //이 입력되는 값들에 대해
        //상태관리화하면 (누적된) 상태관리가 가능해진다.
        console.log(userID);
    };

    const updateUserPW = e => {
        const {target : {value}} = e;
        //value 변수 자체는 문자 하나하나
        //각각 입력될때마다 반응

        setUserPW(value);
        //이 입력되는 값들에 대해
        //상태관리화하면 (누적된) 상태관리가 가능해진다.
        console.log(userPW);
    };
    
    const saveStateValues = (userID, userPW) => {
        localStorage.setItem(userID, userPW);
    };

    return(
        <Container>
            <Title>사용자 로그인</Title>
            <UserInformation>
                <input type='text' placeholder="ID" value={userID} onChange={updateUserID}/>
                <input type='password' placeholder="PW" value={userPW} onChange={updateUserPW}/>
            </UserInformation>
            <Link to={{
                pathname: `/${userID}`
            }} onClick={() => saveStateValues(userID, userPW)}>로그인하기</Link>
        </Container>
    )
};

export default Home;

4-3. Detail.js-画面切り替え後のデータ受信、メンテナンス、ロード

const {userID} = useParams();
const userPW = localStorage.getItem(userID);
//const userIDByLocal = localStorage.key(userPW);

const [finalText, setFinalText] = useState('');
const [finalImage, setFinalImage] = useState('');

let txtDATA = localStorage.getItem(`${userID}fortxt`);
let imageDATA = localStorage.getItem(`${userID}forimg`);

setFinalText(text);
setFinalImage(fileRead.result);

{finalText? (<pre className="textArea" contentEditable>{finalText}</pre>) : (<div>NO SAVED TEXT DATA</div>)}
{finalImage? (<div className="imageAreaCover"><img className="imageArea" src={finalImage}></img></div>) : (<div>NO SAVED IMAGE DATA</div>)}

import React, {useState} from 'react';
import { useParams } from 'react-router';
import styled from 'styled-components'

//import {useRef} from 'react-router-dom';

let fileRead = new FileReader();

const Container = styled.div`
`

function Detail(){

    const {userID} = useParams();
    const userPW = localStorage.getItem(userID);
    //const userIDByLocal = localStorage.key(userPW);

    const [finalText, setFinalText] = useState('');
    const [finalImage, setFinalImage] = useState('');

    let txtDATA = localStorage.getItem(`${userID}fortxt`);
    let imageDATA = localStorage.getItem(`${userID}forimg`);

    let fileBuffer = null;

    async function fileOpenButton(){
        [fileBuffer] = await window.showOpenFilePicker();
        
        let fileData = await fileBuffer.getFile();
        console.log(fileData);
    
        if(fileData.type !== 'image/png'){
            //interface file data
            //await fileRead.readAsDataURL(fileData)
            let text = await fileData.text();
            localStorage.setItem(`${userID}fortxt`, text)

            setFinalText(text);
            return ;
    
        }else if(fileData.type == 'image/png' || 'image/jpeg'){
            //fileReader가 fileData를 먼저 읽어야 한다.
            await fileRead.readAsDataURL(fileData);
            fileRead.addEventListener('load', () => {
                localStorage.setItem(`${userID}forimg` , fileRead.result);
                setFinalImage(fileRead.result);
                //console.log(fileRead.result);
                //console.log(imageArea.src);
                })
            
            
            return;

            

            //fileRead - null, fileRead.result - image URL.
            //upload event를 부여할 경우에만 fileRead에서 data를 읽어올 수 있다.
            
        }else{
            return;
        }
    };

    return(
        <Container>
            <button className="fileOpen" type="file" onClick={fileOpenButton}>파일 불러오기</button>
            {finalText? (<pre className="textArea" contentEditable>{finalText}</pre>) : (
            <div>NO SAVED TEXT DATA</div>)}
            {finalImage? (<div className="imageAreaCover"><img className="imageArea" src={finalImage}></img></div>) : (
                <div>NO SAVED IMAGE DATA</div>)}
            <button className="fileSave">파일 저장하기</button>
            <button className="fileSaveAs">다른 이름으로 파일 저장하기</button>
        </Container>
    )
}

export default Detail;

4-4. リファレンス

5.参照リンク