Practicing Typescript: React Hooks props
42665 단어 타입스크립트typescripttypescript
React Hooks props
useState
// User.tsx
import { useState } from 'react'
type AuthUser = {
name: string
email: string
}
export const User = () => {
const [user, setUser] = useState<AuthUser | null>(null)
const handleLogin = () => {
setUser({
name: 'Joh ',
email: '[email protected]'
})
}
const handleLogout = () => {
setUser(null)
}
return (
<div>
<button onClick={handleLogin}>Login</button>
<button onClick={handleLogout}>Logout</button>
<div>User name is {user?.name}</div>
</div>
)
}
useReducer
// Counter.tsx
import { useReducer } from 'react'
type CounterState = {
count: number
}
type UpdateAction = {
type: 'increment' | 'decrement'
payload: number
}
type ResetAction = {
type: 'reset'
}
type CounterAction = UpdateAction | ResetAction
const initialState = { count: 0 }
function reducer(state: CounterState, action: CounterAction) {
switch (action.type) {
case 'increment':
return { count: state.count + action.payload }
case 'decrement':
return { count: state.count - action.payload }
case 'reset':
return initialState
default:
return state
}
}
export const Counter = () => {
const [state, dispatch] = useReducer(reducer, initialState)
return (
<>
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment', payload: 10 })}>
Increment 10
</button>
<button onClick={() => dispatch({ type: 'decrement', payload: 10 })}>
Decrement 10
</button>
<button onClick={() => dispatch({ type: 'reset' })}>Reset</button>
</>
)
}
useContext
// theme.ts
export const theme = {
primary: {
main: '#3f51b5',
text: '#fff'
},
secondary: {
main: '#f50057',
text: '#fff'
}
}
// ThemeContext.tsx
import React, { createContext } from 'react'
import { theme } from './theme'
type ThemeContextProviderProps = {
children: React.ReactNode
}
export const ThemeContext = createContext(theme)
export const ThemeContextProvider = ({
children
}: ThemeContextProviderProps) => {
return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}
// App.tsx
import { ThemeContextProvider } from './components/context/ThemeContext'
import { Box } from './components/context/Box'
function App() {
return (
<div className='App'>
<ThemeContextProvider>
<Box />
</ThemeContextProvider>
</div>
)
}
// Box.tsx
import { useContext } from 'react'
import { ThemeContext } from './ThemeContext'
export const Box = () => {
const theme = useContext(ThemeContext)
return (
<div
style={{
backgroundColor: theme.primary.main,
color: theme.primary.text
}}>
Theme context
</div>
)
}
useContext future value
// UserContext.tsx
import React, { useState, createContext } from 'react'
type AuthUser = {
name: string
email: string
}
type UserContextType = {
user: AuthUser | null
setUser: React.Dispatch<React.SetStateAction<AuthUser | null>>
}
type UserContextProviderProps = {
children: React.ReactNode
}
// export const UserContext = createContext<UserContextType | null>(null)
// In order to eliminate userContext checking in User.tsx component :
export const UserContext = createContext({} as UserContextType)
export const UserContextProvider = ({ children }: UserContextProviderProps) => {
const [user, setUser] = useState<AuthUser | null>(null)
return (
<UserContext.Provider value={{ user, setUser }}>
{children}
</UserContext.Provider>
)
}
// User.tsx
import { useContext } from 'react'
import { UserContext } from './UserContext'
export const User = () => {
const userContext = useContext(UserContext)
const handleLogin = () => {
// if (userContext) {
userContext.setUser({
name: 'John',
email: '[email protected]'
})
// }
}
const handleLogout = () => {
// if (userContext) {
userContext.setUser(null)
// }
}
return (
<div>
<button onClick={handleLogin}>Login</button>
<button onClick={handleLogout}>Logout</button>
<div>User name is {userContext.user?.name}</div>
<div>User email is {userContext.user?.email}</div>
{/* <div>User name is {userContext?.user?.name}</div>
<div>User email is {userContext?.user?.email}</div> */}
</div>
)
}
// App.tsx
import { UserContextProvider } from './components/context/UserContext'
import { User } from './components/context/User'
function App() {
return (
<div className='App'>
<UserContextProvider>
<User />
</UserContextProvider>
</div>
)
}
useRef
// DomRef.tsx
import { useRef, useEffect } from 'react'
export const DomRef = () => {
// never null assertion null!
const inputRef = useRef<HTMLInputElement>(null!)
useEffect(() => {
inputRef.current.focus()
}, [])
return (
<div>
<input type='text' ref={inputRef} />
</div>
)
}
// MutableRef.tsx
import { useState, useRef, useEffect } from 'react'
export const MutableRef = () => {
const [timer, setTimer] = useState(0)
const interValRef = useRef<number | null>(null)
const stopTimer = () => {
if (interValRef.current) {
window.clearInterval(interValRef.current)
}
}
useEffect(() => {
interValRef.current = window.setInterval(() => {
setTimer(timer => timer + 1)
}, 1000)
return () => {
stopTimer()
}
}, [])
return (
<div>
HookTimer - {timer} -
<button onClick={() => stopTimer()}>Stop Timer</button>
</div>
)
}
Author And Source
이 문제에 관하여(Practicing Typescript: React Hooks props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jha0402/Practicing-Typescript-React-Hooks-props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)