[React] input 소문자를 대문자로 변환하는 방법

다음 예제를 통해 input 값을 어떻게 대문자만 입력받을 수 있는지 살펴봅시다.

다음은 HTML의 Form과 input을 사용해서 대문자만 입력받는 페이지입니다.

 

1. HTML 구조 설계

• div
• form
• input / button

JSX 문법 특성상 최상위 요소는 <div> 태그를 사용합니다.

그리고 명확하게 하기 위해 시맨틱 태그인 <form> 요소를 사용합니다.

그 안에 input 요소와 button 요소를 사용하여 HTML 구조를 설계합니다.

아래 그림을 참고해 주세요.

 

  

    
    
    
    
  
<div className="App">
  <form>
    <input
      type="text"
      name="name"
      placeholder="입력해주세요"
      value={value} // input의 value(값)
      onChange={handleInputChange} // input의 요소 값을 변경할 때 발생하는 change event
    />
    <button type="submit">생성</button>
  </form>
</div>

 

2. state 변수 추가

• input의 value 값을 관리하는 state 변수를 추가합니다.

  

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

 

3. handleInputChange 함수 개발

• handleInputChange 함수는 input의 요소 값(value)이 변경할 때 발생하는 함수입니다.
• => 즉, input에 값(value)을 입력할 때 해당 값(value)을 대문자로 치환해 주는 함수를 만듭니다.
• JavaScript 내장 메서드인 toUpperCase()를 통하여 입력을 받는 동안 input 값(value)를 대문자로 치환해 줍니다.

  

    
    
    
    
  
const handleInputChange = (event) => {
	setValue(event.target.value.toUpperCase());
};

 

---

정리

 

App.js

  

    
    
    
    
  
import { useState } from "react";

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

  const handleInputChange = (event) => {
    setValue(event.target.value.toUpperCase());
  };

  return (
    <div className="App">
      <form>
        <input
          type="text"
          name="name"
          placeholder="입력해주세요"
          value={value}
          onChange={handleInputChange}
        />
        <button type="submit">생성</button>
      </form>
    </div>
  );
}

export default App;