{"id":32899,"date":"2024-11-01T09:12:20","date_gmt":"2024-11-01T09:12:20","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32899"},"modified":"2024-11-01T11:21:33","modified_gmt":"2024-11-01T11:21:33","slug":"react-course-web-storage","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32899\/","title":{"rendered":"React Course: Web Storage"},"content":{"rendered":"<div>\n<h2>Overview<\/h2>\n<p>Web storage is a mechanism that allows web applications to store data on the user&#8217;s browser. It is mainly divided into two types: Local Storage and Session Storage. These two storages differ in terms of usage and lifespan of the data stored. By using web storage, you can implement faster and more efficient web applications. In this course, we will delve deep into how to use web storage with React.<\/p>\n<h2>Understanding Web Storage<\/h2>\n<h3>1. What is Web Storage?<\/h3>\n<p>The Web Storage API is an API that allows web applications to store data on the client side. It provides a way to store data permanently in the browser. This API is divided into two main types:<\/p>\n<ul>\n<li><strong>Local Storage<\/strong>: Stores data permanently. The data remains even when the user closes the browser.<\/li>\n<li><strong>Session Storage<\/strong>: Stores data for one session only. The data disappears when the tab or browser is closed.<\/li>\n<\/ul>\n<h3>2. Reasons to Use Web Storage<\/h3>\n<ul>\n<li><strong>Performance Improvement<\/strong>: Helps reduce server requests and increases data access speed.<\/li>\n<li><strong>Offline Support<\/strong>: Allows data to be stored and used even when the user is offline.<\/li>\n<li><strong>Improved User Experience<\/strong>: Provides a more personalized experience by storing user-customized data.<\/li>\n<\/ul>\n<h2>React and Web Storage<\/h2>\n<p>React is a powerful library for efficiently updating the UI through state management. By utilizing web storage, you can manage data in React applications more easily and intuitively. Below are methods to leverage web storage in React.<\/p>\n<h2>Setting Up a React Project<\/h2>\n<p>As the first step, you need to create a React project. You can create a new React application using <code>create-react-app<\/code>:<\/p>\n<pre><code>npx create-react-app web-storage-example\ncd web-storage-example\nnpm start<\/code><\/pre>\n<p>Using the above commands, you can create and run a basic React application. Now you are ready to implement the web storage functionality.<\/p>\n<h2>Handling Web Storage API<\/h2>\n<h3>1. Example of Using Local Storage<\/h3>\n<pre><code>import React, { useState, useEffect } from 'react';\n\nconst LocalStorageExample = () =&gt; {\n    const [value, setValue] = useState('');\n\n    useEffect(() =&gt; {\n        const storedValue = localStorage.getItem('myValue');\n        if (storedValue) {\n            setValue(storedValue);\n        }\n    }, []);\n\n    const handleChange = (e) =&gt; {\n        setValue(e.target.value);\n        localStorage.setItem('myValue', e.target.value);\n    };\n\n    return (\n        <div>\n            <h1>Local Storage Example<\/h1>\n            <input onchange=\"{handleChange}\" placeholder=\"Type something...\" type=\"text\" value=\"{value}\"\/>\n            <p>Stored Value: {value}<\/p>\n        <\/div>\n    );\n};\n\nexport default LocalStorageExample;<\/code><\/pre>\n<h3>2. Example of Using Session Storage<\/h3>\n<pre><code>import React, { useState, useEffect } from 'react';\n\nconst SessionStorageExample = () =&gt; {\n    const [value, setValue] = useState('');\n\n    useEffect(() =&gt; {\n        const storedValue = sessionStorage.getItem('mySessionValue');\n        if (storedValue) {\n            setValue(storedValue);\n        }\n    }, []);\n\n    const handleChange = (e) =&gt; {\n        setValue(e.target.value);\n        sessionStorage.setItem('mySessionValue', e.target.value);\n    };\n\n    return (\n        <div>\n            <h1>Session Storage Example<\/h1>\n            <input onchange=\"{handleChange}\" placeholder=\"Type something...\" type=\"text\" value=\"{value}\"\/>\n            <p>Stored Value: {value}<\/p>\n        <\/div>\n    );\n};\n\nexport default SessionStorageExample;<\/code><\/pre>\n<h2>Security of Web Storage<\/h2>\n<p>When using web storage, security should be a concern. Here are points to keep in mind:<\/p>\n<ol>\n<li><strong>Do not store sensitive information<\/strong>: Sensitive data such as passwords and credit card information should never be stored in web storage.<\/li>\n<li><strong>Prevent XSS attacks<\/strong>: Applications using web storage can be vulnerable to XSS attacks. To prevent this, input data validation should be thorough.<\/li>\n<\/ol>\n<h2>Integration Scenarios of React and Web Storage<\/h2>\n<p>Common scenarios for utilizing web storage in React include user settings, form data retention, and cached data management. Below are examples of these scenarios.<\/p>\n<h3>Saving User Settings<\/h3>\n<p>You can store the theme (dark mode, light mode, etc.) selected by the user in local storage to ensure that the previously selected theme remains even after refreshing the page.<\/p>\n<pre><code>import React, { useState, useEffect } from 'react';\n\nconst ThemeSwitcher = () =&gt; {\n    const [theme, setTheme] = useState('light');\n\n    useEffect(() =&gt; {\n        const storedTheme = localStorage.getItem('theme');\n        if (storedTheme) {\n            setTheme(storedTheme);\n        }\n    }, []);\n\n    const toggleTheme = () =&gt; {\n        const newTheme = theme === 'light' ? 'dark' : 'light';\n        setTheme(newTheme);\n        localStorage.setItem('theme', newTheme);\n    };\n\n    return (\n        <div classname=\"{theme}\">\n            <h1>Theme Switcher<\/h1>\n            <button onclick=\"{toggleTheme}\">\n                Switch to {theme === 'light' ? 'Dark' : 'Light'} Mode\n            <\/button>\n        <\/div>\n    );\n};\n\nexport default ThemeSwitcher;<\/code><\/pre>\n<h3>Retaining Form Data<\/h3>\n<p>It is possible to store the form data entered by the user in local storage so that the values persist even after refreshing the page.<\/p>\n<pre><code>import React, { useState, useEffect } from 'react';\n\nconst FormExample = () =&gt; {\n    const [formData, setFormData] = useState({ name: '', email: '' });\n\n    useEffect(() =&gt; {\n        const storedData = JSON.parse(localStorage.getItem('formData'));\n        if (storedData) {\n            setFormData(storedData);\n        }\n    }, []);\n\n    const handleChange = (e) =&gt; {\n        const { name, value } = e.target;\n        setFormData({ ...formData, [name]: value });\n        localStorage.setItem('formData', JSON.stringify({ ...formData, [name]: value }));\n    };\n\n    return (\n        <div>\n            <h1>Form Example<\/h1>\n            <input name=\"name\" onchange=\"{handleChange}\" placeholder=\"Name\" type=\"text\" value=\"{formData.name}\"\/>\n            <input name=\"email\" onchange=\"{handleChange}\" placeholder=\"Email\" type=\"email\" value=\"{formData.email}\"\/>\n            <p>Name: {formData.name}<\/p>\n            <p>Email: {formData.email}<\/p>\n        <\/div>\n    );\n};\n\nexport default FormExample;<\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>Web storage is an important tool for efficiently managing client-side data in React applications and improving user experience. Through Local Storage and Session Storage, you can greatly enhance the performance and convenience of web applications. However, it&#8217;s crucial to consider security and avoid storing sensitive data in web storage.<\/p>\n<p>We hope that this course has helped you understand web storage and how to utilize it efficiently in React applications. While data storage is an easy and intuitive task, remember that approaching it the right way is the most important aspect.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Overview Web storage is a mechanism that allows web applications to store data on the user&#8217;s browser. It is mainly divided into two types: Local Storage and Session Storage. These two storages differ in terms of usage and lifespan of the data stored. By using web storage, you can implement faster and more efficient web &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32899\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;React Course: Web Storage&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32899","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/atmokpo.com\/w\/32899\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"Overview Web storage is a mechanism that allows web applications to store data on the user&#8217;s browser. It is mainly divided into two types: Local Storage and Session Storage. These two storages differ in terms of usage and lifespan of the data stored. By using web storage, you can implement faster and more efficient web &hellip; \ub354 \ubcf4\uae30 &quot;React Course: Web Storage&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32899\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:20+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:33+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Web Storage\",\"datePublished\":\"2024-11-01T09:12:20+00:00\",\"dateModified\":\"2024-11-01T11:21:33+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/\"},\"wordCount\":545,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32899\/\",\"name\":\"React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:20+00:00\",\"dateModified\":\"2024-11-01T11:21:33+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32899\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32899\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Web Storage\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/atmokpo.com\/w\/32899\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"Overview Web storage is a mechanism that allows web applications to store data on the user&#8217;s browser. It is mainly divided into two types: Local Storage and Session Storage. These two storages differ in terms of usage and lifespan of the data stored. By using web storage, you can implement faster and more efficient web &hellip; \ub354 \ubcf4\uae30 \"React Course: Web Storage\"","og_url":"https:\/\/atmokpo.com\/w\/32899\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:20+00:00","article_modified_time":"2024-11-01T11:21:33+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32899\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32899\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Web Storage","datePublished":"2024-11-01T09:12:20+00:00","dateModified":"2024-11-01T11:21:33+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32899\/"},"wordCount":545,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32899\/","url":"https:\/\/atmokpo.com\/w\/32899\/","name":"React Course: Web Storage - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:20+00:00","dateModified":"2024-11-01T11:21:33+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32899\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32899\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32899\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Web Storage"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32899","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32899"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32899\/revisions"}],"predecessor-version":[{"id":32900,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32899\/revisions\/32900"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32899"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32899"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32899"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}