리액트

React localStorage

유니유뉘 2023. 3. 3. 12:13
728x90

React localStorage에 대해서

React localStorage란?

React는 웹 브라우저의 localStorage를 이용하여 클라이언트 측에서 데이터를 저장하고 유지할 수 있다.

localStorage는 브라우저에서 key-value 쌍으로 데이터를 저장하는 방식이다.

이는 브라우저를 닫았다가 다시 열어도 데이터가 유지되기 때문에 새로고침, 브라우저 재시작 등과 관계없이 계속해서 사용할 수 있다.

React localStorage를 사용하기 위해서는 먼저 localStorage객체에 접근해야 한다.

이는 일반적으로 componentDidMount 또는 useEffect 훅에서 이루어진다.

예를 들어 아래 코드는 컴포넌트가 마운트된 후 localStorage에서 데이터를 가져오는 방법을 보여준다.

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

function MyComponent(){
	const [data, setData] = useState(null);
	
	useEffect(() => {
		const storedData = localStorage.getItem('myData');
		if(storedData){
			setData(JSON.parse(storedData));
			}
		},[]);	
	return <div>{data}</div>
}

위 코드에서 localStorage의 getItem() 메서드를 사용하여 ‘myData’라는 키에 해당하는 데이터를 가져온다.

가져온 데이터는 JSON.parse()를 사용해 문자열에서 객체 또는 배열 등으로 변환한다.

변환된 데이터는 useState훅을 사용하여 상태에 저장되어 컴포넌트에서 렌더링 된다.

localStorage에 데이터를 저장하려면 setItem() 메서드를 사용하면 된다. 아래 코드는 MyComponent에서 버튼을 클릭하면 localStorage에 데이터를 저장하는 방법을 보여준다.

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

function MyComponent(){
	const [ data,setData ] = useState(null);
		
	useEffect(()=>{
		const storageData = localStorage.getItem('myData');
		if(storedData){
			setData(JSON.parse(storedData));
		}	
	},[]);

	const handleClick = () => {
		const newData = { foo : "bar" };
		localStorage.setItem('myData',JSON.stringify(newData));	
		setData(newData);
	};
	
	return(
		<div>
			<button onClick={handleClick}>Save Data</button>
			{data && <div>{data.foo}</div>}
		</div>
	);	
}

위 코드에서 handleClick 함수는 새로운 데이터를 생성하고 localStorage에 저장한다. 저장된 데이터는 setData를 사용하여 상태에 저장되며, 컴포넌트에서 렌더링 된다.

React localStorage에 저장된 데이터는 보안에 취약하다

이렇게 localStorage를 사용하면 React 애플리케이션에서 클라이언트 측 데이터를 쉽게 관리할 수 있다. 하지만 localStorage에 저장되는 데이터는 브라우저에 의해 쉽게 조작될 수 있어 보안적으로 좋지 않다.

그래서 서버 측에서 데이터를 유지하고, 필요한 경우 클라이언트에 전송하는 방식을 고려해야 한다.

예를 들어, React 애플리케이션에서 사용자 인증 정보를 localStorage에서 저장하는 것은 보안적으로 취약하다. 대신 인증 정보를 서버에서 발급하고 세션 또는 JWT 토근 등을 사용하여 클라이언트에 전송하는 방식을 고려해야 한다.

또한 localStorage에 저장되는 데이터는 브라우저에 의해 쉽게 접근이 가능하기 때문에 민감한 정보나 보안이 중요한 데이터는 localStorage에 저장하지 않는 것이 좋다.

이러한 데이터는 브라우저 메모리에 일시적으로 저장하거나, 서버에서 암호화하여 전송하는 등의 방법을 고려해야 한다.

마지막으로 localStorage에 저장하는 데이터의 용량에도 주의해야 한다. 브라우저마다 lcoalStorage의 용량 제한이 있으며 너무 많은 데이터를 저장하면 성능에 문제가 발생할 수 있다. 따라서 필요한 데이터만 저장하고 주기적으로 localStorage를 정리하는 것이 좋다.

React localStorage에 대한 나의 주관적인 생각

민감하지 않은 데이터를 저장하는 것은 좋으나 개인정보 같은 중요한 데이터들은 localStorage에 저장하면 안 되는 것을 배웠다.

또 무작정 데이터들을 저장하면 성능이 안 좋아질 수 있으니 localStorage에 정말 필요한 데이터들인지 생각해 보면서 코드를 짜는 연습이 필요할 것 같다.

강의에서 이를 이용해 최근 본 상품들을 localStorage에 저장하고 이를 화면에 보여주는 것을 배웠는데 아무것도 모르고 홈페이지를 사용했을 땐 눈여겨보지 않던 기능들이 이제는 어떤 코드로 작성했는지 어느 순간 추측하고 있었다.

아직 해보진 않았지만 localStorage로

사용자 설정 저장: 사용자가 선택한 테마, 언어 등의 설정을 localStorage에 저장하여, 애플리케이션을 다시 열었을 때 이전 설정이 유지되도록 할 수 있습니다.

장바구니 저장: 사용자가 선택한 상품을 장바구니에 담아 localStorage에 저장하여, 다음에 애플리케이션을 열었을 때 이전에 담은 상품이 유지되도록 할 수 있습니다.

검색 기록 저장: 사용자가 검색한 키워드를 localStorage에 저장하여, 다음에 애플리케이션을 열었을 때 이전 검색 기록이 유지되도록 할 수 있습니다.

인증 정보 저장: 사용자의 인증 정보를 localStorage에 저장하여, 다음에 애플리케이션을 열었을 때 자동으로 로그인되도록 할 수 있습니다.

사용자가 작성한 게시물 저장: 사용자가 작성한 게시물을 localStorage에 저장하여, 임시 저장 또는 나중에 작성한 글을 다시 열어 수정할 수 있도록 할 수 있습니다.

이렇게 많은 기능들을 구현할 수 있다고 하니 하나하나씩 구현해 볼 계획이다.

반응형