Open drizzle96 opened 2 months ago
// Context API 정의 Component
// AuthContext.tsx
import React, { createContext, useContext, useState, ReactNode } from 'react';
interface UserType {
name: string;
}
interface AuthContextType {
user: UserType | null;
login: (username: string) => void;
logout: () => void;
}
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
const [user, setUser] = useState<UserType | null>(null);
const login = (username: string) => {
setUser({ name: username });
};
const logout = () => {
setUser(null);
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
);
};
export const useAuth = (): AuthContextType => {
const context = useContext(AuthContext);
if (!context) throw new Error('Error');
return context;
};
import React from 'react';
import { AuthProvider } from './AuthContext';
import Navbar from './Navbar';
import MainContent from './MainContent';
const App: React.FC = () => { return (
); };
export default App;
- Navbar.tsx
```tsx
import React from 'react';
import { useAuth } from './AuthContext';
const Navbar: React.FC = () => {
const { user, logout } = useAuth();
return (
<nav>
{user ? (
<>
<span>Welcome, {user.name}</span>
<button onClick={logout}>Logout</button>
</>
) : (
<span>Please log in</span>
)}
</nav>
);
};
export default Navbar;
import React from 'react';
import { useAuth } from './AuthContext';
import Login from './Login';
const MainContent: React.FC = () => { const { user, login } = useAuth();
return (
); };
export default MainContent;
- Login.tsx
```tsx
import React, { useState } from 'react';
interface LoginProps {
login: (username: string) => void;
}
const Login: React.FC<LoginProps> = ({ login }) => {
const [username, setUsername] = useState<string>('');
const handleLogin = () => {
login(username);
};
return (
<div>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={handleLogin}>Login</button>
</div>
);
};
export default Login;
// authContext.tsx
import { FC, ReactElement, createContext, useContext, useState } from 'react'
type User = {
name: string
}
type AuthContextType = {
user: User | null
login: (username: string) => void
logout: () => void
}
const AuthContext = createContext<AuthContextType>({
user: null,
login: () => { },
logout: () => { },
})
const AuthProvider: FC<{ children: ReactElement }> = ({ children }) => {
const [user, setUser] = useState<User | null>(null)
const login = (username: string) => {
setUser({ name: username })
}
const logout = () => {
setUser(null)
}
return (
<AuthContext.Provider value={{ user, login, logout }}>
{children}
</AuthContext.Provider>
)
}
const useAuth = () => {
const context = useContext(AuthContext)
if (context === undefined) {
throw new Error('useAuth must be used within an AuthProvider')
}
return context
}
export { useAuth, AuthProvider }
// App.tsx
import { AuthProvider } from './authContext'
const App = () => {
return (
<AuthProvider>
<div>
<Navbar />
<MainContent />
</div>
</AuthProvider>
)
}
export default App
// Navbar.tsx
import { useAuth } from './authContext'
const Navbar: React.FC = () => {
const { user, logout } = useAuth();
return (
<nav>
{user ? (
<>
<span>Welcome, {user.name}</span>
<button onClick={logout}>Logout</button>
</>
) : (
<span>Please log in</span>
)}
</nav>
);
};
export default Navbar
// MainContent.tsx
import { useAuth } from './authContext'
const MainContent: React.FC = () => {
const { user } = useAuth();
return (
<div>
{user ? (
<h1>Welcome back, {user.name}!</h1>
) : (
<Login />
)}
</div>
);
};
export default MainContent
// Login.tsx
import { login } from './authContext'
const Login: React.FC = () => {
const [username, setUsername] = useState('');
const { login } = useAuth();
const handleLogin = () => {
login(username);
};
return (
<div>
<input
type="text"
placeholder="Username"
value={username}
onChange={(e) => setUsername(e.target.value)}
/>
<button onClick={handleLogin}>Login</button>
</div>
);
};
export default Login
❓문제
다음 컴포넌트에 타입스크립트와 Context API를 적용해주세요~!
🎯답변