React에서 Input 컴포넌트 구현하기

 

React에서 Input 컴포넌트를 구현하는 것은 사용자와의 상호작용을 처리하기 위한 기본적인 작업입니다. 이 글에서는 사용자 정의 Input 컴포넌트를 제작하는 방법과 함께 상태 관리, 이벤트 처리, 그리고 다양한 스타일링 방법까지 다룰 것입니다. 또한 실무에서 자주 사용하는 패턴과 팁도 함께 살펴보겠습니다.

---

1. 기본 Input 컴포넌트

React에서 Input 컴포넌트는 HTML <input> 요소를 기반으로 구현됩니다. 가장 기본적인 사용법은 다음과 같습니다:

import React, { useState } from "react";

function BasicInput() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      <label>
        Input:
        <input type="text" value={value} onChange={handleChange} />
      </label>
      <p>입력된 값: {value}</p>
    </div>
  );
}

export default BasicInput;

주요 특징

1. 상태 관리: useState로 입력 값을 관리.
2. 이벤트 처리: onChange 이벤트를 통해 값이 변경될 때 상태 업데이트.
3. 양방향 바인딩: value 속성을 사용하여 상태와 동기화.

---

2. 재사용 가능한 Input 컴포넌트 만들기

실무에서는 여러 곳에서 재사용할 수 있는 Input 컴포넌트를 만드는 것이 효율적입니다. 이를 위해 props를 활용하여 동적 속성을 추가할 수 있습니다.

코드 예제

import React from "react";

function Input({ label, type = "text", value, onChange, placeholder }) {
  return (
    <div style={{ marginBottom: "1rem" }}>
      {label && <label>{label}</label>}
      <input
        type={type}
        value={value}
        onChange={onChange}
        placeholder={placeholder}
        style={{
          padding: "8px",
          marginLeft: label ? "8px" : "0",
          border: "1px solid #ccc",
          borderRadius: "4px",
        }}
      />
    </div>
  );
}

export default Input;

사용법

import React, { useState } from "react";
import Input from "./Input";

function App() {
  const [username, setUsername] = useState("");
  const [email, setEmail] = useState("");

  return (
    <div>
      <Input
        label="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
        placeholder="Enter your username"
      />
      <Input
        label="Email"
        type="email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        placeholder="Enter your email"
      />
      <p>Username: {username}</p>
      <p>Email: {email}</p>
    </div>
  );
}

export default App;

주요 포인트

1. Props로 동적 속성 전달: type, label, placeholder 등을 통해 컴포넌트를 유연하게 설정.
2. 스타일링 추가: 간단한 인라인 스타일로 기본적인 디자인 제공.

---

3. Input 컴포넌트에 유효성 검사 추가하기

사용자 입력의 유효성을 검사하는 기능은 필수적입니다. 다음 예제는 입력 값의 길이를 확인하는 간단한 유효성 검사 기능을 추가한 것입니다.

코드 예제

import React, { useState } from "react";

function ValidatedInput() {
  const [value, setValue] = useState("");
  const [error, setError] = useState("");

  const handleChange = (e) => {
    const inputValue = e.target.value;
    setValue(inputValue);

    if (inputValue.length < 5) {
      setError("최소 5글자 이상 입력해야 합니다.");
    } else {
      setError("");
    }
  };

  return (
    <div>
      <label>
        Input:
        <input
          type="text"
          value={value}
          onChange={handleChange}
          style={{
            borderColor: error ? "red" : "#ccc",
          }}
        />
      </label>
      {error && <p style={{ color: "red" }}>{error}</p>}
    </div>
  );
}

export default ValidatedInput;

주요 기능

1. 유효성 검사: 입력 값 길이를 기준으로 에러 메시지를 표시.
2. 동적 스타일링: 에러 상태에 따라 입력 필드의 테두리 색상 변경.

---

4. Input 컴포넌트에 커스텀 스타일 적용하기

React에서 CSS를 활용하여 Input 컴포넌트에 스타일을 추가할 수 있습니다. CSS-in-JS 라이브러리나 CSS 모듈을 사용하면 컴포넌트 스타일링을 더욱 효율적으로 관리할 수 있습니다.

Styled-Components 예제

/** @jsxImportSource @emotion/react */
import { css } from "@emotion/react";

const inputStyle = css`
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  &:focus {
    outline: none;
    border-color: blue;
  }
`;

function StyledInput({ value, onChange, placeholder }) {
  return (
    <input
      css={inputStyle}
      value={value}
      onChange={onChange}
      placeholder={placeholder}
    />
  );
}

export default StyledInput;

---

5. 고급 기능: 디바운스(debounce) 적용

입력 값이 변경될 때마다 즉시 상태를 업데이트하면 불필요한 리렌더링이 발생할 수 있습니다. 이를 방지하기 위해 디바운스를 적용해 보겠습니다.

코드 예제

import React, { useState, useEffect } from "react";

function DebouncedInput({ onDebouncedChange, delay = 300 }) {
  const [value, setValue] = useState("");

  useEffect(() => {
    const handler = setTimeout(() => {
      onDebouncedChange(value);
    }, delay);

    return () => clearTimeout(handler);
  }, [value, onDebouncedChange, delay]);

  return (
    <input
      type="text"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter text"
    />
  );
}

export default DebouncedInput;

사용법

function App() {
  const handleDebouncedChange = (value) => {
    console.log("Debounced Value:", value);
  };

  return <DebouncedInput onDebouncedChange={handleDebouncedChange} />;
}

---

6. 결론

React에서 Input 컴포넌트를 구현하는 과정은 간단하지만, 재사용성과 유지보수성을 고려하여 확장 가능한 구조로 개발하는 것이 중요합니다. 이번 글에서는 기본적인 Input 구현부터 유효성 검사, 스타일링, 그리고 고급 기능인 디바운스 적용까지 다양한 사례를 다뤘습니다.

다음 단계:

• 폼 라이브러리(예: Formik, React Hook Form)와의 연동
• 다국어 지원을 위한 i18n 적용
• 접근성 향상을 위한 ARIA 속성 추가

질문이나 의견은 댓글로 남겨주세요! 😊