[html] 인풋 구조 짜기. peer vs htmlFor

import React from 'react';

function TextField({ id, label, placeholder, error, ...props }) {
  const focusClasses = 'focus:border-blue-400 focus:ring-blue-400';
  const baseClasses = 'w-full p-2 border border-gray-300 rounded-md';
  const errorClasses = 'border-red-400 focus:border-red-400 focus:ring-red-400';

  return (
    <div className="flex flex-col gap-2">
      <label htmlFor={id} className="text-sm text-gray-700">
        {label}
      </label>
      <input
        id={id}
        placeholder={placeholder}
        className={`${baseClasses} ${error ? errorClasses : focusClasses}`}
        aria-invalid={!!error}
        aria-describedby={error ? `${id}-error` : undefined}
        {...props}
      />
      {error && (
        <p id={`${id}-error`} className="text-red-400 text-sm">
          {`${label}은 필수입니다.`}
        </p>
      )}
    </div>
  );
}

export default TextField;

<label>
  <span className="peer-invalid:text-red-500">Email</span>
  <input className="peer invalid:border-red-500" required />
</label>

 

두가지는 인풋을 어떻게 구성할 것인가 라는 내용을 탐구하는 과정에서 발견하고 배운 내용이다.

 

위는 htmlFor를 사용하여 구성한 방식.

아래는 tailwind에서 사용하는 peer구조방식

 

그때 그때 쓰는걸 권장하긴 하지만, 재활용 방식이나 분기방식이면 윗 내용을 추천한다.

개인적인 공부하면서 배운 내용 정리.

방식	장점	단점	추천상황
htmlFor + id	명시적, JS로 상태 조작 쉬움, 접근성 기본기	스타일 상태 분기 복잡해질 수 있음	React 폼 컴포넌트 분리 시
label > input.peer	상태 기반 스타일링 매우 직관적	로직 분리 힘듦, 조건부 렌더링 불편	빠른 UI 프로토타이핑, 정적 form 구성

 

윗 내용이나 아랫내용이나 라벨 클릭시 인풋이 자동으로 포커싱되는 css가 작동된다.

그런데 이런 내용을 모르면 솔직히... 이건 왜쓰지 하게 되지..