When developing a web application, it is very important to store and manage user data on the client side.
In this course, we will learn how to utilize web storage in a React application.
Web storage is implemented through two main methods, namely session storage and local storage.

What is Web Storage?

Web storage provides a way to store data on the client side.
It is a simple API provided by the browser, allowing data to be stored and read without requesting the server.
There are two main types of web storage.

• Local Storage: Data is persistently stored even when the user is using the web application. The data remains even if the browser session ends.
• Session Storage: Data is only maintained during the session of the browser tab or window. Closing the tab or exiting the browser will make the data disappear.

Using Web Storage in React

Using web storage in React is very easy. Here, we will illustrate how to use local storage and session storage with a simple example.

1. Using Local Storage

Let’s create a simple component that saves and retrieves data using local storage.

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

const LocalStorageExample = () => {
    const [name, setName] = useState('');

    useEffect(() => {
        const storedName = localStorage.getItem('name');
        if (storedName) {
            setName(storedName);
        }
    }, []);

    const handleChange = (event) => {
        const newName = event.target.value;
        setName(newName);
        localStorage.setItem('name', newName);
    };

    return (
        

            
Local Storage Example
            
            
Stored Name: {name}
        
    );
};

export default LocalStorageExample;

In the code above, we receive the user’s name, store it in local storage, and retrieve the saved name when the page is reloaded.
We use the useEffect hook to read data from local storage when the component mounts.

2. Using Session Storage

Next, let’s create an example for saving and retrieving data using session storage.

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

const SessionStorageExample = () => {
    const [sessionData, setSessionData] = useState('');

    useEffect(() => {
        const storedData = sessionStorage.getItem('sessionData');
        if (storedData) {
            setSessionData(storedData);
        }
    }, []);

    const handleChange = (event) => {
        const newData = event.target.value;
        setSessionData(newData);
        sessionStorage.setItem('sessionData', newData);
    };

    return (
        

            
Session Storage Example
            
            
Stored Data: {sessionData}
        
    );
};

export default SessionStorageExample;

In this example using session storage, the user’s input data can be maintained during the browser session.
The data is automatically deleted when the session ends. Such functionality is useful in cases like shopping cart and temporary storage.

Web Storage API

When dealing with web storage, the following API is used:

• setItem(key, value): Stores a value for a specified key.
• getItem(key): Returns the value for a specified key. Returns null if the key does not exist.
• removeItem(key): Deletes the value stored for a specified key.
• clear(): Deletes all stored data.
• key(index): Returns the key at the specified index.
• length: Returns the number of stored items.

Advantages and Disadvantages of Web Storage

Let’s look at the advantages and disadvantages of using web storage.

Advantages

• Easy to Use: Web storage is very easy to use. You can store and read data without complex setup.
• No Asynchronous Handling Needed: Data can be stored and retrieved immediately without server requests.
• Throughput: Data reading and writing performance is excellent.

Disadvantages

• Storage Capacity Limit: Local storage is limited to about 5MB per domain.
• Security Issues: Caution is needed when storing sensitive information. Data stored on the client side can be easily accessed, so privacy should be protected.
• Browser Dependency: The behavior of web storage may vary depending on the browser used by the user.

Use Cases of Web Storage

Web storage can be useful in various situations. Here are some common use cases.

• User Preference Settings: You can store user-selected themes or language settings to provide the same environment during the next login.
• Shopping Cart Feature: In online shopping malls, items added to the cart can be stored in local storage to retain data until the user checks out.
• Temporary Storage: You can save data to local storage from user input forms to avoid losing data even if the user leaves the page.

Conclusion

Web storage is a useful tool for storing and managing data on the client side in React applications.
Through this course, you have learned the basic usage of local storage and session storage and explored various use cases.
Try to utilize web storage in your future projects!

References

• MDN Web Docs – Web Storage API
• React Docs – Hooks Overview

React is a library for building efficient user interfaces. Today, we will study operators frequently used in React in depth. Operators are important tools in programming languages that create new values using two or more operands. In React, various operators can be used to dynamically update the UI and interact with the user.

1. Basic Operators in JavaScript

As React is written in JavaScript, it is important to understand the basic JavaScript operators. The operators in JavaScript can be categorized as follows:

1.1. Arithmetic Operators

Arithmetic operators are used to perform basic mathematical operations. The representative arithmetic operators are as follows:

• Addition (+): Adds two values.
• Subtraction (-): Subtracts the second value from the first value.
• Multiplication (*): Multiplies two values.
• Division (/): Divides the first value by the second value.
• Modulus (%): Returns the remainder of the division of the first value by the second value.

For example:

const a = 10;
const b = 5;
const sum = a + b; // 15
const difference = a - b; // 5
const product = a * b; // 50
const quotient = a / b; // 2
const remainder = a % b; // 0

1.2. Comparison Operators

Comparison operators are used to compare two values and return a boolean value. Common comparison operators are as follows:

• Equal (===): Returns true when both value and data type are the same.
• Not Equal (!==): Returns true when either value or data type is different.
• Greater Than (>): Returns true when the left value is greater than the right value.
• Less Than (<): Returns true when the left value is less than the right value.
• Greater Than or Equal (>=): Returns true when the left value is greater than or equal to the right value.
• Less Than or Equal (<=): Returns true when the left value is less than or equal to the right value.

1.3. Logical Operators

Logical operators perform logical combinations of boolean values. The main logical operators are as follows:

• AND (&&): Returns true when both conditions are true.
• OR (||): Returns true when at least one of the two conditions is true.
• NOT (!): Inverts a boolean value.

2. Using Operators in React

Operators can be used within React components to update the state and perform conditional rendering. Let’s look at some examples of how to use operators in React.

2.1. State Update

In React, state is an essential element for managing component data. You can manipulate values using arithmetic operators when updating the state.

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const increment = () => {
        setCount(count + 1); // Using arithmetic operator
    };

    return (
        

            
Current count: {count}
            Increase
        
    );
}

2.2. Conditional Rendering

In React, you can show components based on specific conditions through conditional rendering. You can easily implement conditional rendering using comparison operators and logical operators.

import React, { useState } from 'react';

function Greeting() {
    const [isLoggedIn, setIsLoggedIn] = useState(false);

    return (
        

            {isLoggedIn ? 
Welcome!
 : 
Login required.
}
             setIsLoggedIn(!isLoggedIn)}>
                {isLoggedIn ? 'Logout' : 'Login'}
            
        
    );
}

3. Advanced Operators

In addition to the basic operators mentioned above, React also allows for more complex logic through advanced operators. Here, we will look at some advanced operators.

3.1. Ternary Operator

The ternary operator is a way to express conditional rendering concisely. The format is as follows:

condition ? value if true : value if false

For example:

{isLoggedIn ? 
Welcome!
 : 
Login required.
}

3.2. Optional Chaining

Optional Chaining is a method to prevent errors when accessing deep properties of an object if that property does not exist. It can be used as shown in the code below:

const user = { name: 'John Doe', address: { city: 'Seoul' } };
const city = user.address?.city; // 'Seoul'
const country = user.address?.country; // undefined

4. Conclusion

In this lesson, we explored the concept and application of operators in React. You can dynamically update the state and construct various UIs through conditional rendering based on user interactions. To properly understand and utilize React, it is essential to firmly grasp the basic concepts of JavaScript operators.

We will continue to cover various topics related to React in the future. See you in the next lesson!

React is a JavaScript library that is widely used for building user interfaces on the client side. By leveraging the advanced features of JavaScript, you can write more efficient and maintainable code. In this article, we will discuss the concepts of the spread operator (…) and rest parameters (…), and explain how to utilize these two in React components.

1. Spread Operator

The spread operator is used to expand all elements of an array or object individually. Introduced in ES6, this syntax improves code readability and enables easier data manipulation.

1.1 Spread Operator in Arrays

The spread operator can be used for copying, merging, or adding elements to arrays. Let’s look at the following example.

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// Array Copy
const arrCopy = [...arr1];

// Array Merge
const combinedArr = [...arr1, ...arr2];

// Adding Elements to Array
const newArr = [...arr1, 0, ...arr2];

1.2 Spread Operator in Objects

The spread operator is similarly used for objects, allowing for copying, merging, and modifying objects.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

// Object Copy
const objCopy = { ...obj1 };

// Object Merge
const combinedObj = { ...obj1, ...obj2 };

// Object Modification
const modifiedObj = { ...obj1, b: 5 };

2. Rest Parameters

Rest parameters are used in the function parameter list to bundle multiple arguments into an array. This is particularly useful when the number of parameters is not fixed.

2.1 Basic Usage of Rest Parameters

As shown in the example below, you can use rest parameters to handle multiple arguments as a single array.

function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

3. Using Spread Operator and Rest Parameters in React

In React, the spread operator and rest parameters are very useful for state management and handling component props.

3.1 Using Spread Operator with Component Props

The spread operator allows you to pass all props of an object at once. This reduces code duplication and enables efficient prop propagation.

const Button = ({ label, ...props }) => {
    return <button {...props}>{label}</button>;
};

const App = () => {
    return <Button label="Click Me" onClick={() => alert('Clicked!')} />;
};

3.2 Using Rest Parameters for State Management

You can utilize rest parameters in React’s state management. The following example shows how to apply rest parameters in state updates.

const [state, setState] = useState({ a: 1, b: 2 });

const updateState = (newValues) => {
    setState((prevState) => ({
        ...prevState,
        ...newValues,
    }));
};

// Usage Example
updateState({ b: 3 });

4. Conclusion

The spread operator and rest parameters are very useful tools in React and JavaScript as a whole. They help keep code concise, improve readability, and enable efficient data processing. By actively utilizing these tools in React development, you can write cleaner and more maintainable code.

5. Additional Resources

If you would like more details, please refer to the following resources:

• MDN – Spread syntax
• MDN – Rest parameters
• React Docs – Components and Props