현대의 웹 애플리케이션에서는 사용자 맞춤화가 매우 중요한 요소로 자리잡고 있습니다.
사용자 인터페이스(UI)를 사용자에게 맞춤 설정할 수 있는 기능을 제공하면,
사용자가 애플리케이션을 더 편리하게 사용할 수 있으며, 이는 결국 애플리케이션의 사용성을 높이는 데 기여합니다.
이 글에서는 React를 사용하여 대시보드를 만들고, 사용자 설정을 로컬 스토리지에 저장하는 기능을 추가하는 방법을 알아보겠습니다.
1. 프로젝트 설정
먼저, React 프로젝트를 설정해야 합니다. Create React App을 사용하여 프로젝트를 간단히 설정합니다.
다음 명령어를 사용하여 새로운 React 애플리케이션을 생성합니다.
npx create-react-app my-dashboard
cd my-dashboard
npm start
2. 기본 대시보드 레이아웃 만들기
대시보드는 일반적으로 사이드바, 헤더, 콘텐츠 영역 등으로 구성됩니다.
먼저 기본적인 레이아웃을 정의해 보겠습니다.
// src/App.js
import React from 'react';
import './App.css';
function App() {
return (
대시보드
환영합니다!
이곳에서 다양한 데이터를 확인할 수 있습니다.
);
}
export default App;
3. 사용자 설정 저장하기
사용자 설정을 저장하기 위해서는 React의 상태(state)를 사용하고,
로컬 스토리지(localStorage)를 활용하여 데이터를 영구적으로 저장합니다.
기본적인 사용자 설정으로는 다크 모드 및 언어 설정을 고려해 볼 수 있습니다.
3.1 상태 관리
다음 예시에서는 사용자 테마를 저장하는 간단한 설정을 구현해 보겠습니다.
// src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [darkMode, setDarkMode] = useState(false);
useEffect(() => {
const savedMode = localStorage.getItem('darkMode');
if (savedMode) {
setDarkMode(JSON.parse(savedMode));
}
}, []);
useEffect(() => {
localStorage.setItem('darkMode', darkMode);
}, [darkMode]);
const toggleDarkMode = () => {
setDarkMode((prevMode) => !prevMode);
};
return (
대시보드
환영합니다!
이곳에서 다양한 데이터를 확인할 수 있습니다.
);
}
export default App;
// src/App.css
.app {
background-color: white;
color: black;
transition: background-color 0.5s, color 0.5s;
}
.app.dark {
background-color: black;
color: white;
}
3.2 설정 및 관리
사용자 설정 버튼을 추가하여 사용자가 모드를 전환할 수 있도록 하였습니다.
이는 버튼 클릭 시 상태가 변경되고, 변경된 상태가 로컬 스토리지에 저장되도록 하여
사용자 설정을 지속적으로 유지하게 됩니다.
4. 추가적인 사용자 설정 구현
이제 간단한 언어 설정 기능을 추가해 보겠습니다.
다국어 지원을 위해 언어 선택 드롭다운을 추가하고 사용자가 선택한 언어를 로컬 스토리지에 저장하도록 하겠습니다.
// src/App.js
import React, { useState, useEffect } from 'react';
import './App.css';
function App() {
const [darkMode, setDarkMode] = useState(false);
const [language, setLanguage] = useState('ko');
useEffect(() => {
const savedMode = localStorage.getItem('darkMode');
if (savedMode) {
setDarkMode(JSON.parse(savedMode));
}
const savedLanguage = localStorage.getItem('language');
if (savedLanguage) {
setLanguage(savedLanguage);
}
}, []);
useEffect(() => {
localStorage.setItem('darkMode', darkMode);
}, [darkMode]);
useEffect(() => {
localStorage.setItem('language', language);
}, [language]);
const toggleDarkMode = () => {
setDarkMode((prevMode) => !prevMode);
};
const handleLanguageChange = (event) => {
setLanguage(event.target.value);
};
return (
대시보드
{language === 'ko' ? '환영합니다!' : 'Welcome!'}
{language === 'ko' ? '이곳에서 다양한 데이터를 확인할 수 있습니다.' : 'You can check various data here.'}
);
}
export default App;
5. 결론
이제 우리는 React로 간단한 대시보드를 만들고, 사용자 설정을 로컬 스토리지에 저장하는 기능을 구현했습니다.
이 기본적인 개념을 바탕으로 다양한 기능을 확장할 수 있습니다.
예를 들어, API와 통신하여 동적으로 데이터를 불러오고, 사용자 설정을 서버 측에서 관리할 수도 있습니다.
이 글을 통해 기본적인 설정을 이해하고, 자신만의 대시보드를 개발하는 데 도움이 되었기를 바랍니다.