끄적끄적 코딩
article thumbnail
Published 2021. 1. 8. 04:51
[React] Input React
// useInput.js

import { useState } from "react";

const useInput = (initialValue, validator) => {
  const [value, setValue] = useState(initialValue);	// 첫번째 파라미터로 받은 값을 value에 입력
  const onChange = (event) => {	// 값이 변경된 경우 
    const {	// 이벤트 객체에 담겨있는 현재의 텍스트 값을 value에 저장
      target: { value },
    } = event;
    let willUpdate = true;
    if (typeof validator === "function") {	// 두번째 파라미터로 받은 값이 함수인 경우
      willUpdate = validator(value);	// value를 해당 함수에 넣어서 실행
    }
    if (willUpdate) {
      setValue(value);	// input값 변경
    }
  };
  return { value, onChange };
};

export default useInput;
// index.js

import React from "react";
import ReactDOM from "react-dom";
import useInput from "./useInput";

const App = () => {
  const maxLen = (value) => value.length <= 10;	// 글자수가 10자이하면 true 반환
  const name = useInput("Mr.", maxLen); // useInput를 통해 반환 된 값 name에 저장
  return (
    <div className="App">		
      <input placeholder="Name" {...name} /> <!-- 반환된 값들 input에 입력 -->
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

input에 사용되는 코드들을 useInput.js파일로 분리해서 사용했습니다.
validator라는 파라미터에 함수를 넘겨주어서 해당 결과가 false인 경우에 입력이 되지 않게 하였습니다.

 

'React' 카테고리의 다른 글

[React] title  (0) 2021.01.08
[React] 배열 값 동적 출력  (0) 2021.01.08
[React] useState  (0) 2021.01.08
[React] 간단한 게임 사이트  (0) 2020.12.18
[React] gh-pages  (0) 2020.12.16

검색 태그