NEW(스크립트용) (15) 썸네일형 리스트형 html에서 자주 쓰이는 특수문자, 특수기호, 이모지 코드 표현 문자 < 공백 ' ' (1칸 space) & & " " © ⓒ « ≪ ± ± · · » ≫ -특수기호 ½ ⅓ ⅔ ¼ ¾ ⅛ ⅝ ⅞ ๑ • ิ . • ั ๑ ๑ ۩ ۞ ۩ ๑ ♬ ✿ . ｡ . : * ★ ☆ ε ї з ℡ ❣ · ۰ • ● ○ ● ō ゃ ♥ ♡ ๑ ۩ ﺴ ☞ ☜ ☎ ☏ ♡ ⊙ ◎ ☺ ☻ ✖ ╄ ஐ ﻬ ► ◄ ▧ ▨ ♨ ◐ ◑ ↔ ↕ ▪ ▫ ☼ ♦ ▀ ▄ █ ▌▐░ ▒ ▬ ♦ ◊ ◦ ☼ ♠ ♣ ▣ ▤ ▥ ▦ ▩ ◘ ◙ ◈ ♫ ♬ ♪ ♩ ♭ ♪ の ☆ → あ ぃ ￡ ❤＃ ＠ ＆ ＊ ❁ ❀ ✿ ✾ ❃ ✺ ❇ ❈ ❊ ❉ ✱ ✲ ✩ ✫ ✬ ✭ ✮ ✰ ☆ ★ ✪ ¤ ☼ ☀ ☽ ☾ ❤ ♡ ღ ☻ ☺ ❂ ◕ ⊕ ☉ Θ o O ♋ ☯ ㊝ ⊙ ◎◑ ◐ ۰ • ● ▪ ▫ ｡ ﾟ ๑ ☞ ☜ ☂ ♨ ☎.. react input type files 의 이미지 mapping 및 삭제 (dataTransfer.items.add, Array.slice(index,1) 사용) import React, { useState } from "react"; import "../../App.css"; const FilesSize = () => { //files:실제파일, selected: 파일가상주소 const [files, setFiles] = useState([]); const [selected, setSelected] = useState([]); const imageHandleChange = (e) => { //filesize const activeFiles = Array.from(e.target.files); let toastShow = false; activeFiles.forEach((el) => { console.log(el.size); if (el.size / 1000000.. select react로 custom 하기 (기존 select option 사용 x) import React, { useState } from "react"; import "../../../App.css"; import "../../../pages/css부분/select/select.css"; const SelectCustom = () => { const options = ["select1", "select2", "select3"]; const [optionActive, setOptionActive] = useState(false); const [selectedText, setSelectedText] = useState(""); return ( { setOptionActive(!optionActive); }} > {selectedText !== "" ? selectedText : "-"}.. react useState 로 토글버튼 만들기 import React, { useState } from "react"; import "./UseState.css"; import "../../App.css"; const EachUseState = () => { const btnarr = [ { id: 1, name: "apple" }, { id: 2, name: "bannan" }, { id: 3, name: "melon" } ]; const [fruits, setFruits] = useState(btnarr); const [select, setSelect] = useState([]); return ( {fruits.map((fruit) => ( { console.log(fruit); !select.includes(fruit) ? setSelect((.. 날짜 앞뒤 *일 이후 이전 값 구하기(javascript) const dt = new Date( new Date("2022-01-01").setDate( new Date("2022-01-01").getDate() - 2 ) ); console.log(dt); toastify 활용하기 참고: https://fkhadra.github.io/react-toastify/introduction https://fkhadra.github.io/react-toastify/how-to-style/ Css classes as function You can also provide a function. This is what it looks like with tailwind css const contextClass = { success: "bg-blue-600", error: "bg-red-600", info: "bg-gray-600", warning: "bg-orange-400", default: "bg-indigo-600", dark: "bg-white-600 font-gray-300" }; retu.. {children}사용방법 **공통상위 컴퍼넌트를 묶고 싶을때 children 을 사용하며 하단과 같이 사용 가능하다. ( css는 테일윈드 사용) //부모컴퍼넌트 import Header from "../Header"; /*ui*/ import ArrowBackIosOutlinedIcon from "@material-ui/icons/ArrowBackIosOutlined"; const Parent = () => { return ( ); }; [...] //자식 컴퍼넌트 import React from "react"; const Header = ({ children }) => { return ( {children} ); }; export default Header; 이전 1 2 다음