내가 만든 예제
[React] v17 vs v18 update state batch
동일한 코드 사용 import { useEffect, useLayoutEffect, useState } from "react"; export default function App() { const [a, setA] = useState(0); useEffect(() => { setA((a) => { console.log("first useEffect = " + a + "->" + 1); return 1; }); }, []); useEffect(() => { if (a === 2) { setA((a) => { console.log("secont useEffect = " + a + "->" + 3); return 3; }); } }, [a]); useLayoutEffect(() => { setA((a) => ..
라이브러리 없이 typescript/reactHook 으로 다국어 지원하기
리액트 라이브러리 중 다국어를 지원하는 라이브러리는 물론 많지만, 간단한 랜딩 페이지 제작에서까지 라이브러리를 사용하기엔 뭔가 귀찮은 부분이 있다. 오늘은 간단하게 react hook 과 typescript만을 사용해서 자동완성 기깔나게 지원하는 다국어 지원 기능을 뚝딱 만들어보자 먼저, 예제에서 지원하는 언어셋은 한국어, 영어라고 가정하자 언어 타입을 만든다. export type LanguageType = "ko" | "en"; 언어셋을 담을 자바스크립트 파일도 하나 만든다. /constants/lang.ts const STRING_ESSETS = { MAIN_TITLE: { ko: "훅을 사용한 다국어 예제입니다.", en: "useMuiltilingual Example" }, SUB_TITLE: ..
CSS 애니메이션 예제 (css animation sample)
애니메이션 css 파일에 있는 애니메이션을 라벨링했습니다. 라벨링 된 애니메이션 확인 후 css 파일과 함께 쓰시면 됩니다. 애니메이션 이름을 class 에 추가하거나 혹은 직접 호출해서 사용하세요.
[react] formik - useFormik 예제
import "./styles.css"; import { useFormik } from "formik"; const formInitialValues = { regNoFront: "", regNoBack: "" }; export default function App() { // form의 validation을 확인하는 validator const validator = (values) => { let error = {}; // 에러객체가 있으면 handle submit이 되지 않는다. const { regNoFront, regNoBack } = values; console.log(regNoFront.length); if (regNoFront.length < 6) { error.regNoFront = "주민번..