개요 프로젝트에서 숫자를 입력해야 하는 페이지가 있었다. 커서를 대면 자동으로 키패드가 뜨게 하려고 inputtype을 "number"로 설정했는데 안드로이드에서는 잘 적용이 되지만 IOS에서는 키패드가 아닌 일반 자판이 뜬다고 한다.. 해결법 inputtype 이외에 별도로 inputmode="numeric" 을 해주면 된다..! 만약, 키패드에 숫자와 함께 .(온점) 을 넣고 싶다면 numeric 대신 decimal을 넣어주면 된다.

개요 input 태그에 type을 숫자로 설정하고, maxLength = {1}로 했는데 숫자를 계속 입력할 수가 있었다... 알고보니, maxLength는 최대 "문자" 길이이기 때문에 input type = "number"일 때는 적용되지 않는다...! 해결법 input 태그 안에 아래 코드를 넣어주면 해결된다..! onInput={(e) => { if (e.target.value.length > e.target.maxLength) e.target.value = e.target.value.slice(0, e.target.maxLength); }} maxLength보다 value가 크면 더 큰 부분을 잘라내는 코드다. 전체 input 태그를 보면 아래와 같다. { if (e.target.value.le..

지금 만들고 있는 페이지가 버튼을 클릭했을 때 페이지가 바뀌지 않고 처리할 것들이 많아서 useState를 이렇게나 많이 써버렸다... 사실 이 hook을 자유자재로 잘 쓰지는 못 했었는데 이번 기회에 아주 확실하게 익히게 되었다. 몇 가지 정리를 해보자면 1. styled-components을 이용해 스타일을 적용할 때 useState를 이용해 그 값을 바꾸고자 한다면 props로 넘겨주면 된다! const Sticker_Img = styled.img` display: flex; width: ${(props) => props.size}; height: ${(props) => props.size}; margin: 2vw; `; const [imgSize, setImgSize] = useState("37v..

이전까지 React 프로젝트에서 스타일을 지정할 때 #hi.js 안녕 #hi.css .style { display: flex; height: 100%; width: 100%; } 이런 식으로 진행했었다... 그런데 이런 식으로 하면 클래스 이름이 겹치는 태그가 있을 때 css가 둘 다 적용되는 문제가 발생한다...! 따라서 많은 사람이 같이 개발하는 프로젝트에서는 styled-components를 사용하는 것이 효율적이다. 1. styled-components 설치 npm install styled-components 2. styled-components 사용법 클래스를 안 쓰는 대신 컴포넌트를 만들어준다. 따라서 기존에 버튼 이렇게 썼던 코드를 버튼 이렇게 써주면 된다..! import styled f..

반복문을 쓸 때 for문을 주로 쓰는데 map() 함수를 사용하면 더 편하게 array에서 값을 꺼낼 수 있다, 사용 방법은 간단하게 배열.map()에 callback 함수를 넣어주면 된다! (당연히 화살표 함수도 가능) arr.map(callback 함수) 예제1 const arr = [1, 2, 3, 4, 5]; //일반 함수 const map1 = arr.map(function(x){x+2)); //화살표 함수 const map1 = arr.map(x=> x+2); console.log(map1); //[3,4,5,6,7] 예제2 콜백함수의 파라미터는 두 개까지 들어갈 수 있다. 위의 예제1은 element 하나만 넣은 거고 index까지도 넣을 수 있다. const arr = [ 10, 20, 3..