목록ReactJS (5)

Scikit Web

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX. html tag 중 react style 과 맞지 않아 생기는 오류 이다. 위와 같은 코드를 아래와 같이 react 에서 권장하는 방법으로 변경하여 해결
ReactJS 2023. 2. 28. 20:44
MUI Step UI Custom example

NextJS 에서 정말 유용하게 사용가능한 UI 라이브러리인 MUI 에서 제공하는 Step UI의 css 를 커스텀 해서 사용하는 방법이다 https://mui.com/material-ui/react-stepper/
ReactJS 2023. 1. 12. 17:37
Javascript Fetch Promise All Request 예제

fetch 문 자체를 배열에 넣고 Promise all을 이용하여 한번에 실행 시키는 방법입니다. response.json() 데이터를 맵에 넣고 response.json 데이터를 넣은 맵을 await 로 한번더 해야 정상적으로 원하는 데이터를 얻을 수 있습니다. async () => { let requestFetchAll = [] as any; requestFetchAll.push( fetch('https://google.com', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ test: 'test' }), }), ); const preRequesetFetchAll = await Prom..
ReactJS 2022. 11. 1. 21:32
NextJS i18N with Use Router

import { useRouter } from "next/router"; type ObjType = { [key: string]: string; }; const LANGUAGES_KO: ObjType = { hello: "안녕하세요", }; const LANGUAGES_EN: ObjType = { hello: "Hello", }; const Translate = () => { const router = useRouter(); return (text: string) => { let getText = text; if (router.locale?.toLocaleLowerCase() === "ko") { getText = LANGUAGES_KO[text]; } else if (router.locale?.toLo..
ReactJS 2022. 8. 1. 20:24
ReactJS 리액트 Custom Hook 만들기 예제

https://ko.reactjs.org/docs/hooks-custom.html 자신만의 Hook 만들기 – React A JavaScript library for building user interfaces ko.reactjs.org 위의 예제를 바탕으로 실제로 사용하는 예제를 만들어 보았다 useCustomHook.tsx 파일을 생성한다, 여러개의 리턴을 주고 싶다면 {} 안에 선언해주면 된다 import { useCallback, useEffect, useState } from 'react'; const useCustomHook = () => { const [isOnline, setIsOnline] = useState(null); const onCallBack = useCallback(); ret..
ReactJS 2022. 6. 30. 22:12
이전 Prev 1 Next 다음