Typescript 기초 (2) - State, Forms

Singsoong·2022년 6월 20일
0

Typescript

목록 보기
3/6

📌State

const [counter, setCounter] = useState(1);
  • useState Hook으로 준 초기값 1을 통해 counternumber 타입으로 변경된다
setCounter("hello"); 
  • number 타입으로 지정되어 있기 때문에 string 타입으로 counter를 지정하면 에러가 발생한다.
  • 초기값을 준 값에 따라 type이 지정되고, type은 변경되지 않게 계속 간다
  • number 타입으로 counter를 만들었으므로 number 타입으로 계속 가는것

const [value, setValue] = useState(0);
  • 하지만, value 값이 string 또는 number 타입이 되길 원한다면,
    아래와 같이 코드를 작성하면 된다.
const [value, setValue] = useState<number|string>(0);
  • 이렇게 type을 바뀌는 변수는 자주 사용할 일이 없을 것이다.
    보통 state를 만들면 type을 계속 유지하게 될 것
  • 결론은 Typescript는 state의 초기값을 보고 어떤 type인지 파악하여 type을 지정한다.
    ex) 초기값이 0이면, number type / true이면 boolean type / ""이면 string type

📌Form

  • form을 만들고, 안에 input을 만들었다.
  • input의 value를 설정해주고 onChange 이벤트도 설정했다.
  const [value, setValue] = useState("");
  const onChange = (event) => {
  };
  return (
    <>
      <form>
        <input
          onChange={onChange}
          value={value}
          type="text"
          placeholder="username"
        />
        <button>Log in</button>
      </form>
    </>
  );
  • onChange 함수에 event는 any 타입이 된다.
  • 가능한 우린 any 타입을 배제해야 한다. (무슨 타입인지 설정해야 한다)
  • event에 type을 추가하는 방법을 알아보자.
 const onChange = (event: React.FormEvent) => {};
  • 이런식으로 type을 지정하면 되는데 어떤 이벤트에 어떤 type을 지정해주어야 하는지는 구글링이나 document를 읽을 수 밖에 없다.
  • 어떤 종류의 Element가 이 onChange 이벤트를 발생시킬 수 있는지 특정할 수 있다.(Input Element)
 const onChange = (event: React.FormEvent<HTMLInputElemnt>) => {};
  • 따라서 이렇게 작성해주면 typescript는 onChange 함수가 InputElement에 의해 실행될 것을 알게된다.
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    console.log(event.currentTarget.value);
  };
  • ReactJS에서는 event.target.value 라고 했다면, typescript에서는 currentTarget을 이용한다.
const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {
      currentTarget: { value },
    } = event;
    setValue(value);
  };
  • 최종적으로 onChange 함수를 이렇게 작성하게 되면 우리가 저지를 수 있는 실수로부터 보호받을 수 있다.
  • setValue는 Stirng type만 받게되고, onChange 함수는 input Element에 의해 만들어지고 실행된다.
  • form의 submit 버튼을 눌렀을 때 새로고침을 막기 위해 onSumbit 함수를 작성하자.
const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello", value);
  };
  return (
    <>
      <form onSubmit={onSubmit}>
        <input
          onChange={onChange}
          value={value}
          type="text"
          placeholder="username"
        />
        <button>Log in</button>
      </form>
    </>
  );
  • 마찬가지로 event의 type을 설정해주면 된다.
  • 이렇게 type을 지정함으로써 실수로부터 보호받고, 자동완성 기능을 받을 수 있다.
profile
Web Developer

0개의 댓글