React context ์ฝ”๋“œ ๋‹จ์ˆœํ™”ํ•˜๊ธฐ :: ๋ฆฌํŒฉํ† ๋ง
์›น (WEB)/๊ณต๋ถ€ 2021. 9. 21. 14:11

๋ฌธ์ œ ์ƒํ™ฉ React context ์‚ฌ์šฉ ์‹œ ๊ธฐ์กด ์ฝ”๋“œ ๊ตฌ์„ฑ์ด context ๋‚ด๋ถ€ ์š”์†Œ๊ฐ€ ๋Š˜์–ด๋‚  ์ˆ˜๋ก ๋ณต์žกํ•ด์ ธ์„œ ๋ฆฌํŒฉํ† ๋งํ•˜๋ ค ํ•œ๋‹ค. ๊ธฐ์กด ๊ตฌํ˜„ // ๊ตฌ์„ฑ const UserContext = createContext({}); const SignInContext = createContextvoid>(()=>{}); export const UserContextProvider = ({ children }) => { const [user, setUser] = useState(); const signIn = () => {}; return ( {children} ); } export function useUserState() { const context = useContext(UserContext); return c..

React-query :: api fetch ์‹œ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ
์›น (WEB)/๊ณต๋ถ€ 2021. 7. 10. 12:38

React-query : fetch, cache, synchronize, update(for server state)์— ์‚ฌ์šฉ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ๊ณต์‹์‚ฌ์ดํŠธ React Query Hooks for fetching, caching and updating asynchronous data in React react-query.tanstack.com ๋ฐฐ๊ฒฝ server state ์‚ฌ์šฉ ์‹œ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š” ๋ฌธ์ œ์ ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. caching deduping(๋ฐ์ดํ„ฐ ์ค‘๋ณต ์ œ๊ฑฐ) update "out of date" data / know when is it reflecting updates data pagination optimization, lazy loading data memory management, garba..

React-query :: Query
์›น (WEB)/๊ณต๋ถ€ 2021. 7. 10. 12:35

๊ธฐ๋ณธ ์‚ฌ์šฉ const info = useQuery('unique_key', fetchData); // fetchData๋Š” promise ๋ฐ˜ํ™˜ uniqueํ•œ key๋กœ ์ •์˜ํ•˜๋ฉฐ, key์— ๋ฌถ์ด๋Š” ๋ฐ์ดํ„ฐ๋Š” ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ์ด๋‹ค. useQuery๊ฐ€ ๋ฐ˜ํ™˜ํ•˜๋Š” result๋Š” ๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ์˜ ์ƒํƒœ๋ฅผ ๋‹ด๊ณ  ์žˆ๋‹ค. ์ƒํƒœ loading isLoading์ด true๊ฐ€ ๋œ๋‹ค. error isError๊ฐ€ true๊ฐ€ ๋˜๋ฉฐ, error์— ์—๋Ÿฌ ์ •๋ณด๊ฐ€ ๋‹ด๊ธด๋‹ค. success isSuccess๊ฐ€ true๊ฐ€ ๋˜๋ฉฐ, data์— ์ •๋ณด๊ฐ€ ๋‹ด๊ธด๋‹ค. idle ์‚ฌ์šฉ ์˜ˆ์ œ const { isLoading, isError, data, error } = useQuery('key', fetchData); // const { status, data, erro..