React Hooks: 문자 카운터 컴포넌트 생성

독자 여러분 안녕하세요!

이 문서에서는 예를 들어 간단한 텍스트 입력이나 텍스트 영역과 같이 어디에서나 사용할 수 있는 간단한 문자 카운터 구성 요소를 빌드하는 방법을 보여 드리겠습니다.

최종 결과는 다음과 같습니다.

문자 카운터 구성 요소

이 간단한 구성 요소부터 시작하겠습니다. 이것은 현재 카운트와 총 카운트만 수신하는 상태 비저장 구성 요소가 될 것입니다.

type CharCountProps = {
  current: number;
  total: number;
};

const CharCount = ({ current, total }: CharCountProps) => {
  return (
    <span style={{ color: current > total ? 'red' : 'black' }}>
      {`${current}/${total}`}
    </span>
  );
};

보시다시피 현재 카운트가 합계보다 크면 텍스트를 빨간색으로 변경하는 color 스타일도 적용했습니다.
이제 이 구성 요소를 텍스트 입력에 적용해 보겠습니다.

텍스트 입력에 적용

이제 CharCount 구성 요소를 담을 텍스트 입력을 만들고 있습니다.
유연하게 만들기 위해 이 사용자 정의 입력에는 허용되는 문자 수를 알려주는 maxLength 소품이 있습니다.
또한 CharCount 구성 요소는 이 소품이 undefined와 다른 경우에만 렌더링됩니다.

아래에서 입력 onChange 핸들러는 value 속성이 length 에서 사용되는 CharCount 상태를 업데이트합니다.

type CustomInputProps = {
  maxLength?: number;
};

const CustomInput = ({ maxLength }: CustomInputProps) => {
  // This state holds the input's text
  const [value, setValue] = useState<string>('');

  return (
    <fieldset>
     {/* Here is our input that is being watched */}
      <input
        type="text"
        value={value}
        onChange={(e) => setValue(e.currentTarget.value)}
      />

      {/* The char counter only renders if the maxLength prop is provided */}
      {maxLength !== undefined && (
        /* The CharCount component receives the current string length and the max length supported for this field */
        <CharCount current={value.length} total={maxLength} />
      )}
    </fieldset>
  );
};

마무리

이제 정의된 CustomInput로 maxLength를 생성해 보겠습니다.

export default function App() {
  return <CustomInput maxLength={10} />;
}

문자 카운터 유효성 검사로 입력을 렌더링합니다! 이제 입력 콘텐츠가 예상보다 클 수 없음을 사용자에게 경고하는 것과 같은 몇 가지 동작을 추가할 수 있습니다.

여기에서 간단한 useState 후크를 사용하여 입력 데이터를 유지하고 이를 CharCount 상태 비저장 구성 요소로 전달했습니다.

전체 코드clicking here.를 찾을 수 있습니다.

지금은 그게 다야! 나는 당신이 모두 그것을 즐겼기를 바랍니다!
아래 댓글 섹션을 사용하여 아이디어를 공유해 주세요!