[REACT 메모] REACT Hook - useInput(1)

* 내가 이해한대로 메모한 것임... 틀릴 수도 있음!

 

export default function App() {
const name = useInput("mr.");
// 기본 값을 mr. 로 설정

  return (
    <div className="App">
<input placeholder="name"  {...name} />
{/* // {...name}  value={name.value}*/}
{/*  {...name} name안에 있는 모든 것들을 풀어준다. */}
     </div>
  );
}

인풋에서 name안에 있는 것들을 각각을 풀어서 적용

name은useInput함수에 mr. 를 기본적으로 전달

 

const useInput = initialVal => {
  const [value, setValue] = useState(initialVal);

  return {value}
  // 어떤 변화를 주기 전에 설정한 기본 값을 value와 return하고 싶어
  // return하지 않으면 그냥 placeholder가 나옴.
}

useInput은 화살표 함수 initialVal를 인자로 받음(위에서 "mr."를 전달해줬기 때문에 그것을 받음)

useState의 기본 값을 initialVal로 지정  - 그래서 기본값이 mr. 가됨

그 후  return {value} 

 

인풋에 변화를 줄 때(글자 입력시 ..) 

const useInput = initialVal => {
  const [value, setValue] = useState(initialVal);
  
  const onChange = e => {
    const {target:{ value }} = e;
    setValue(value);
    // setValue에 value전달 안해주면 움직이지 않음

  }
  return {value, onChange}
  // 어떤 변화를 주기 전에 설정한 기본 값을 value와 return하고 싶어
  // return하지 않으면 그냥 placeholder가 나옴.
}

onChange 함수에서 이벤트(변화)를 e로 받아서

e에서 target은 value

이벤트 타겟에서 값을 setValue로 넣어줌.

그리고 onChange를 리턴해줌 그래야 화면상에서 내가 적은 글자가 인풋에 표기됨

 

전체코드

import { useState } from "react";
import "./styles.css";


const useInput = initialVal => {
  const [value, setValue] = useState(initialVal);
  const onChange = e => {
    const {target:{ value }} = e;
    setValue(value);
    // setValue에 value전달 안해주면 움직이지 않음

  }
  return {value, onChange}
  // 어떤 변화를 주기 전에 설정한 기본 값을 value와 return하고 싶어
  // return하지 않으면 그냥 placeholder가 나옴.
}

export default function App() {
const name = useInput("mr.");
// 기본 값을 mr. 로 설정

  return (
    <div className="App">
<input placeholder="name"  {...name} />
{/* // {...name}  value={name.value}*/}
{/*  {...name} name안에 있는 모든 것들을 풀어준다. */}
     </div>
  );
}

// useInput은 value를 return 할거고
// name은 value랑 같아질 거고 그다음 value는 name.value를 가짐