React에서 로컬 저장소 사용하기.

로컬 저장소를 사용하면 사용자가 브라우저 창 내에서 항목을 유지할 수 있으므로 사용자가 웹 페이지를 떠나더라도 해당 데이터는 방문 기간 동안 임시로 저장됩니다. 더 단순한 애플리케이션을 구축할 때 데이터베이스의 필요성을 우회하는 매우 간단한 접근 방식을 제공하는 경우가 많습니다.

사용자가 '토큰 생성' 버튼을 클릭할 때마다 단일 임의 토큰을 생성하고 로컬 저장소에 저장하는 기능을 하는 간단한 React 애플리케이션을 살펴보겠습니다.

루트 폴더에는 구성 요소를 페이지에 렌더링하는 index.js 파일이 있습니다.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'

ReactDOM.render(<App/>, document.getElementById('root'))

다음으로, 버튼을 클릭할 때마다 임의의 단어를 표시하기 위해 배열을 반복하는 함수와 임의의 단어 배열이 포함된 token.js 파일이 있습니다.

const tokens = [
    "abate", "abbas", "abbe", "abbey", "abbot", "abbott", "abc", "abe", "abed", "abel", "abet", "abide", "abject", "ablaze", "able", "abner", "abo", "abode", "abort", "about", "above", "image", "imbue", "imp", "impel", "import", "impute", "inane", "inapt", "inc", "inca", "incest", "inch", "incur", "index", "india", "indies", "indy", "inept", "inert", "infect", "infer", "infima", "infix", "infra", "ingot", "inhere", "injun", "ink", "inlay", "inlet", "inman", "inn", "inner", "input", "insect", "yip", "ymca", "yodel", "yoder", "yoga", "yogi", "yoke", "yokel", "yolk", "yon", "yond", "yore", "york", "yost", "you", "young", "your", "youth", "yow", "yucca", "yuck", "yuh", "yuki", "yukon", "yule", "yves", "ywca", "yyy", "yyyy", "zag", "zaire", "zan", "zap", "zazen", "zeal", "zealot", "zebra", "zeiss", "zen", "zero", "zest", "zesty", "zeta", "zeus", "zig", "zilch", "zinc", "zing", "zion"
];

const generateToken = () => {
    let random = Math.floor(Math.random() * tokens.length)
    let randomWord = tokens[random]
    return randomWord;  
};

export default generateToken;

마지막으로 로직의 대부분이 상주할 App.js 구성 요소가 있습니다.

import React from 'react';
import {useState, useEffect} from 'react';
import generateToken from './token';

const App = () => {
    const [token, setToken] = useState('')
    useEffect(() => {
        localStorage.setItem('storedToken', token)
    })

    const handleClick = () => {
       setToken(generateToken())  
    }

    return (
        <div>
            <h1>Using LocalStorage in React</h1>
            <button onClick= {handleClick}>Generate New Token</button>
            <div>{token}</div>
        </div>
    )
}

export default App

우리는 'token.js'에서 generateToken 함수를 가져오고 'react'에서 {useState 및 useEffect} 후크를 가져옵니다.

App 구성 요소 내에서 먼저 상태를 빈 문자열로 초기화합니다.

 const [token, setToken] = useState('')

이제 useEffect 후크 내에서 두 개의 매개변수를 받는 localStorage.setItem를 사용합니다. 원하는 대로 이름을 지정할 수 있는 키storedToken와 localStorage 내에 저장하려는 두 번째 매개변수입니다. 여기서 우리는 token 상태에 저장한 버튼을 클릭할 때마다 새로 생성된 토큰을 저장하려고 합니다.

return 문 안에 버튼을 추가하고 버튼을 클릭할 때마다 호출되는 함수handleClick를 호출하는 onClick 이벤트 리스너를 연결합니다. 이 함수는 버튼 클릭 시 생성된 새로운 무작위 토큰으로 상태를 업데이트하는 역할을 합니다.

const handleClick = () => {
        setToken(generateToken())  
    }

새로 생성된 토큰이 localStorage에 저장되었는지 확인하려면 페이지를 마우스 오른쪽 버튼으로 클릭하고 검사하십시오.
애플리케이션으로 이동하면 'storeToken'의 키:값 쌍과 생성된 임의의 토큰이 표시됩니다.

이제 앱이 이렇게 보일 것입니다.