회원가입 기능을 구현하던 도중, 사용자가 input 태그에 값을 입력하는 것을 감지하여 값이 없을 경우 '값을 입력해야합니다' 등의 경고 메시지를 출력하는 부가기능을 구현하고자 했다.
그렇다면 어떻게 해야 기능을 구현할 수 있을까?
가장 단순한 방법은 JS를 이용하여 입력값을 실시간으로 받아오는 것이다.
const [inputData, setInputData] = useState('');
const onChargeData = (event) => {
setInputData(event.target.value);
};
return (
<>
<input type='text' value={inputData} onChange={onChargeData}/>
</>
);사용자가 input 태그에서 입력한 값은 onChange 속성에 사용된 onChargeData 함수에 의해서 inputData에 저장된다. 이벤트의 발동 조건이 값이 변화한 시점이기 때문에 한 글자를 입력할 때마다 inputData에 새로운 값이 저장되게 된다.
그리고 논리 연산자를 사용하여 inputData의 값이 초기값 ''이 아닐때, 즉 사용자가 어떠한 값이라도 입력하지 않았을 때 아래와 같이 경고 메시지가 출력되도록 구현하면 된다.
return (
<>
<input type='text' value={inputData} onChange={onChargeData}/>
{inputData === '' && '입력값이 존재하지 않습니다.'}
</>
);- 조건부 렌더링의 방식은 논리 연산자를 사용하는 방법 이외에도 if문을 이용하여 리액트 컴포넌트에서 return하는 HTML 태그를 다르게 출력하는 방법도 존재한다.
1. CSS도 할수있다!
그런데 CSS에서도 위에서 구현한 기능을 다른 방식으로 구현할 수 있다. 최신 버전의 CSS는 input 태그에 placeholder 텍스트가 존재하는지 여부를 감지하는 가상 클래스 ':placeholder-shown'가 있기 때문이다.
<input placeholder='이메일 주소를 입력해주세요.' />
<input placeholder='비밀번호를 입력해주세요.' />input 태그에서 사용할 수 있는 속성 중에서, 이 입력창이 어떤 값을 입력하는 목적으로 사용되고 있는지 등에 대한 설명을 입력하는 placeholder 속성이 존재한다. 위 코드를 예시로 들어 설명하자면..
화면에서는 input 태그에 위와 같은 텍스트가 출력되며, 사용자가 어떤 값이라도 입력하는 순간 placeholder 속성에 사용된 텍스트는 자동으로 사라지게 된다.
.input {
color: red;
}
.input:placeholder-shown {
color: blue;
}가상 클래스 ':placeholder-shown'은 이 과정을 감지할 수 있다. input 태그의 placeholder 속성에 사용한 텍스트가 화면에 출력하고 있다면 (입력값이 존재하지 않는 상황이라면..) 자신에게 작성된 CSS style을 적용시켜 준다.
또한 가상 클래스를 사용하고 있기 때문에 :placeholder-shown에 연계하여 다른 태그의 CSS Style에도 변화를 줄 수 있다. CSS도 간단한 기능이라면 JS를 대신할 수 있는 것.
2. CSS는 할수없다..
하지만 HTML과 CSS가 할 수 있는 기능적 범위는 명확한 한계점이 존재한다. 애초에 JS를 사용하는게 아니므로 JS에서 구현한 변수나 함수를 사용할 수 없어서 위에서 언급한 기능 이외에 더 발전된 것을 구현하기가 힘들다. 당장 form에서 작성을 마치고 submit을 했을 때 입력값이 없으면 submit을 못하게 하는 간단한 기능도 구현이 힘들다..
- 다만 styled-components을 사용하면 구현 가능한 기능의 범위가 더 확장된다!
CSS의 능력이 과거에 비해서 차츰 높아지고 있다고는 하지만 JS를 완전히 대체하는건 당연히 불가능하고, 구현 가능한 기능의 범위도 한계점이 명확하다.
3. 하지만.
나는 프로젝트에서 :placeholder-shown 사용하여 기능을 구현하다가 위와 같은 이유로 CSS에서 JS로 돌아온 경험이 있다. 다만 부족하게나마 강의도 듣고 독학도 한 JS와 달리 CSS에 대한 진지한 공부는 해본 적이 없으므로 CSS는 무조건 나쁘다고 생각해서는 안된다! 지식이 적을 때는 절대 속단하지는 말 것!
