input 입력 시 따라오는 단위 만들기

input에 값 입력 시 일정 간격을 두고 따라오는 단위를 만들어야 했음

 

예시

 

const [number, setNumber] = useState(0);

const inputHandler = e => {
	setNumber(e.target.value);
};

return (
	...
    <div className="input-wrap">
        <input type="text"
               className="input"
               id="number"
               value={number}
               onChange={(e) => inputHandler(e)}
        />
        <div className="unit" data-before={number}>{number ? "kg" : ""}</div>  
        // number state 값과 똑같이 그대로 작성됨
    </div>
    ...
)

 

//scss
.input-wrap {
    position: relative;
    .input {
        height: 48px;
    }
    .unit {
        position: absolute;
        top: 16px;
        left: 18px;
        font-size: 14px;
    }
    [data-before]::before {
        content: attr(data-before);
        opacity: 0;    // 똑같이 작성되는 부분을 숨김
    }
}

 

css attr 함수를 이용하면 data 속성 값을 가져올 수 있음

data-before 값을 가져와서 content에 넣어줌

 

그럼 unit 인 요소 before 에 input value에 입력한 값이 똑같이 들어가게 되는데

빨간 글씨가 before

 

opacity 0을 줘서 감추면 unit만 남게 됨

 

 

값을 길게 입력할수록 값과 단위의 간격이 변동될 수 있는데 

css로 input과 before 의

font-family, font-size, font-weight, letter-space, padding 등을 동일하게 맞추거나 조절하면 됨