개발일지 TIL(Today I Learned)
[2023.07.11] 개발일지
이승재(Frontend Developer)
2023. 7. 12. 21:10
input 태그 중 숫자만 입력가능하고 입력한 숫자를 천 단위로 콤마(,)를 찍어서 렌더링해주는 input 태그를 만드는 과정에서 내가 원하는 결과와는 다른 상황이 벌어졌다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
import React, { useState } from 'react'
import Input from '../components/input/input';
function FeatureInput() {
const [name, setName] = useState('');
const [price, setPrice] = useState(0);
const nameInput = (event) => {
setName(event.target.value);
};
const priceInput = (event) => {
const value = Number(event.target.value)
if (isNaN(value)) {
return setPrice(0);
} else {
return setPrice(value.toLocaleString())
};
};
const inputButton = () => {
if (name === '' && price === 0) {
alert('이름과 가격을 모두 입력해주세요.')
} else {
alert(`{name: ${name}, price : ${price.replace(/,/g, '')}}`);
};
};
return (
<div>
<Input
name={name}
price={price}
nameInput={nameInput}
priceInput={priceInput}
inputButton={inputButton}
/>
</div>
)
}
export default FeatureInput
|
cs |
내가 쓴 코드는 입력받은 event.target.value를 value로 변수를 선언하고 만약 그 value값이 숫자가 아니라면 0을 반환하면서 값이 입력이 되지 않게 하고
숫자라면 toLocaleString() 메서드를 이용해 입력받은 value값을 콤마가 찍힌 상태로 set해주는 과정을 담았다.
하지만 결과는 내가 원하는 형태가 아니었다.
숫자를 입력하면 콤마가 찍혀서 나오기는 하지만 4자리수 이상 넘어가면 갑자기 value값이 NaN이 되면서 입력이 되지 않는 현상이 발생한 것이다.
이런 현상이 발생된 이유는 바로 입력한 value값이 콤마를 추가함으로써 숫자가 아닌 String값으로 변해 price값을 set해주지 않기 때문이었다.
이를 방지하기 위해서 value값이 렌더링되는 과정에서 다시금 숫자로 변환한 다음 전체에 콤마를 추가한 과정이 필요했다.
그래서 완성된 코드는 이러하다
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
import React, { useState } from 'react'
import Input from '../components/input/input';
function FeatureInput() {
const [name, setName] = useState('');
const [price, setPrice] = useState(0);
const nameInput = (event) => {
setName(event.target.value);
};
const priceInput = (event) => {
const { value } = event.target;
const formattedValue = formatInput(value);
setPrice(formattedValue);
};
const formatInput = (value) => {
// 입력값에서 모든 콤마를 제거한 후 숫자만 남깁니다.
const fixedValue = value.replace(/,/g, '');
// 입력값이 빈 문자열이거나 NaN이면 그대로 반환합니다.
if (fixedValue === '' || isNaN(fixedValue)) {
return 0;
}
// 입력값을 숫자로 변환한 후 천 단위로 콤마를 찍어줍니다.
const commaValue = Number(fixedValue).toLocaleString();
// 콤마가 추가된 포맷팅된 숫자를 반환합니다.
return commaValue;
};
const inputButton = () => {
if (name === '' && price === 0) {
alert('이름과 가격을 모두 입력해주세요.')
} else {
alert(`{name: ${name}, price : ${price.replace(/,/g, '')}}`);
};
};
return (
<div>
<Input
name={name}
price={price}
nameInput={nameInput}
priceInput={priceInput}
inputButton={inputButton}
/>
</div>
)
}
export default FeatureInput
|
cs |
계속해서 렌더링되는 input태그의 특성상 그에 맞춰 계속 원하는 형태로 변환해주는 과정이 필요하다!!!