📌State
const [counter, setCounter] = useState(1);
- useState Hook으로 준 초기값 1을 통해
counter
가 number
타입으로 변경된다
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을 만들고, 안에 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을 지정함으로써 실수로부터 보호받고, 자동완성 기능을 받을 수 있다.