uuid

npm install uuid

npm install nanoid

// UUID 가져오기 import { v4 as uuidv4 } from 'uuid'; import { useState } from 'react'; function UserList() { const [users, setUsers] = useState([]); const addUser = (name) => { const newUser = { id: uuidv4(), name: name, createdAt: new Date() }; setUsers([...users, newUser]); }; return ( <div> <button onClick={() => addUser('Alice')}>Add User</button> <ul> {users.map(user => ( <li key={user.id}> {user.name} (ID: {user.id}) </li> ))} </ul> </div> ); }

// Nanoid 가져오기 import { nanoid } from 'nanoid'; import { useState } from 'react'; function PostList() { const [posts, setPosts] = useState([]); const addPost = (title) => { const newPost = { id: nanoid(), title: title, createdAt: new Date() }; setPosts([...posts, newPost]); }; return ( <div> <button onClick={() => addPost('New Post')}>Add Post</button> <ul> {posts.map(post => ( <li key={post.id}> {post.title} (ID: {post.id}) </li> ))} </ul> </div> ); }

import { useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; import { nanoid } from 'nanoid'; function App() { const [users, setUsers] = useState([]); const [sessions, setSessions] = useState([]); const [userName, setUserName] = useState(''); // UUID를 사용한 사용자 생성 const createUser = (e) => { e.preventDefault(); const newUser = { id: uuidv4(), name: userName, email: `${userName.toLowerCase()}@example.com` }; setUsers([...users, newUser]); setUserName(''); }; // Nanoid를 사용한 세션 생성 const createSession = (userId) => { const newSession = { id: nanoid(), userId: userId, createdAt: new Date().toISOString() }; setSessions([...sessions, newSession]); }; return ( <div> <h1>사용자 관리</h1> <form onSubmit={createUser}> <input type="text" value={userName} onChange={(e) => setUserName(e.target.value)} placeholder="사용자 이름" /> <button type="submit">사용자 추가</button> </form> <h2>사용자 목록</h2> <ul> {users.map(user => ( <li key={user.id}> {user.name} ({user.email}) <button onClick={() => createSession(user.id)}> 세션 생성 </button> </li> ))} </ul> <h2>세션 목록</h2> <ul> {sessions.map(session => ( <li key={session.id}> 세션 ID: {session.id} | 사용자 ID: {session.userId} </li> ))} </ul> </div> ); } export default App;