목차
· 우리가 평소에 구현하던 필수 값과 옵셔널 레이아웃
· CSS와 HTML 속성만으로 필수 입력 값과 Optional 노출하기
보통 구글폼 · 왈라폼과 같은 입력 폼을 서비스 내에서도 구성을 하게 되면, 사용자에게 폼 안에서 필수 입력 값과 옵셔널한 입력 값을 알려주기 위해 레이아웃 형태로 보여주곤한다. 나도 여러 서비스를 개발하면서 필수 입력 값에 대한 처리를 `*` 문자와 같이 처리를 해주었는데, 부모 요소에 `flex` 속성을 주거나 별도의 컴포넌트를 만들어 `inline` 스타일로 나열시키는 형태로 진행을 했었다. 계속 이렇게 처리를 하다가 우연하게 정말 좋은 방법이 있어 기억 차 여기에 포스팅으로 기록을 해놓으려고 한다.
우리가 평소에 구현하던 필수 값과 옵셔널 레이아웃
<div class="form-group">
<label fro="name"> Name </label>
<input type="text" id="name" /> // required의 속성은 true/false 값이 아닌 존재 유무만을 판단하기 때문에 동적 변경으로 접근해야함
{isRequired && <RequiredSymbol/> }
</div>
우리가 평소에 구현하고 있던 폼에 대한 필수 값과 옵셔널한 레이아웃은 직접 엘리먼트에 글자를 입력하거나, 일부 컴포넌트를 통해 재사용하게 만드는 방법이 있다. 하지만 개발자가 필요할 때마다 만들어주어야하고, 상태 값으로 내부 엘리먼트를 노출시킨다고 해도 무언가 찜찜하게 비효율적으로 느껴질 때가 있었다.
CSS와 HTML 속성만으로 필수 입력 값과 Optional 노출하기
CSS에는 disabled, hover 등 각 상태에 맞는 CSS 속성들을 적용할 수 있는데, required 속성도 마찬가지로 관련 속성이 적용되었을 때의 스타일 속성을 적용할 수 있다.
<div class="form-group">
<label for="name"> Name </label>
<input type="text" id="name" required />
</div>위 코드에서 <RequiredSymbol/> 컴포넌트가 제거 되었고 깔끔하게 폼 내부에 두 개의 엘리먼트가 남아있다. 여기서 required 속성이 추가되었을 때, 폼 옆에 필수 값 또는 Optional 처리를 진행하고 싶다면 아래와 같이 CSS를 적용할 수 있다.
label:has(+ input:required)::after {
content: "*";
color: #f44336;
}
label:has(+ input:optional)::after {
content: "(optional)";
margin-left: 0.25rem;
}`:has()` 와 같이 부모 선택자와 `+` 와 같은 인접 형제 선택자를 통해 label 뒤 input에 속성 여부를 판단하여 content를 추가하는 방법으로 쉽게 필수 값과 옵셔널한 값에 대한 레이아웃 노출을 진행할 수 있다. 여기서 `:optional` 이라는 속성은 CSS Pseudo-class로 required가 없는 input 자체를 의미하는 것이기 때문에 required가 없다면 자동으로 옵셔널 레이아웃이 노출이 되게 된다.
댓글