JavaScript/Typescript3 [React] input 태그에 숫자만 입력되게 / input number 버튼 없애기 1 input 태그에 숫자만 입력되게 { if (birth.length > 8 && e.key !== "Backspace") { e.preventDefault(); } }} onChange={(e: React.ChangeEvent) => { const { value } = e.target; const onlyNum = value.replace(/[^0-9]/g, ""); setBirth(onlyNum); }} /> input창에 숫자만 입력되게 하려면, 정규식을 이용하여 숫자가 아닌 것들은 ''으로 바꾸어버리면 된다. 그런데 당황스럽게도 이 방법을 사용하니 maxLenght가 적용이 안되는 것이다 💦 그래서 onKeyDown을 이용하여 value가 8자리 이상일 땐 '뒤로가기' 외의 키는 안먹히도록 따로.. 2024. 1. 17. [React/Typescript] styled-components에서 props사용 시 에러 문제상황 interface StyledDivProps { isfocused: boolean; } /* --- style --- */ const SearchBar = styled.div` background-color: ${(props) => props.isfocused ? "white" : "#f2f2f5"}; border: 1px solid ${(props) => (props.isfocused ? "#dddddd" : "#f2f2f5")}; transition: all 0.4s ease; `; const Topbar = () => { // 검색창 css관리용 const [isfocuse, setIsfocuse] = React.useState(false); const onFocus = () => { se.. 2024. 1. 10. [Typescript] 프로젝트 시작하기 타입스크립트로 프로젝트 시작하기 npx create-react-app myApp --template typescript 처음엔 npm init react-app (프로젝트이름) --template typescript 으로 설치를 시도하였으나 타입스크립트가 설치되지 않아 결국 npx로 설치했다 .. 원인은 모르겠다(ㅜㅜ) 아무튼 잘 설치가 되었다면 index나 app파일 확장자가 .tsx로 되어있으며, tsconfig.json(ts파일을 js로 변환)이 디폴트로 들어있는 프로젝트가 설치가 된다! 2024. 1. 9. 이전 1 다음
