TS 함수 사용 방법 : 이전에 했던 props나 state 방법과 동일하다
const 함수이름=(props:만든인터페이스이름)=>{}
export default 함수이름;
또는
const 함수이름:React.FC<만든인터페이스이름>=(props)=>{}
export default 함수이름;
2번째 내용을 쓸려면 import React from 'react'를 추가해야한다. FC는 Function Components의 약자이다. 구글에서 찾아본 결과 요즘에는 잘 쓰지 않는 문법이라고 한다.
클래스형에서 이벤트를 쓸 경우
예시
onClick={()=>{this.setState({number:this.state.number+1});}}
이벤트 안에서 함수를 짜는 경우는 일반적인 경우와 같다
onChange={(e)=>{this.setState({text:e.target.value});}}
onChange={this.handleChange}
render 밖에서 만들어야 하는 함수
handleChange=(e:React.ChangeEvent<HTMLInputElement>)=>{this.setState({text:e.target.value});};
안에 넣어서 쓰는 e 객체의 경우 크게 문제는 없지만 밖에서 쓸 경우 e가 어떤 값을 의미하는지 줘야 한다. 확인 방법은 일단 안에서 쓴 뒤 매개변수에 커서를 가져다 디면 어떤식으로 줬는지 확인이 가능하고 그 값을 그대로 넣어주면 된다
예를 들어 onClick의 경우는 React.MouseEvent<HTMLButtonElement,MouseEvent>가 나온다
함수형에서 이벤트를 쓸 경우
클래스형과 동일하다
onChnage={(e)=>setText(e.target.value)>
onChange={InputChange}
return 밖에서 만드는 함수
const InputChange=(e:React.ChangeEvent<HTMLInputElement>)=>{setText(e.target.value)}