TYPESCRIPT 를 REACT에 적용
설치방법 : npx create-react-app react-typescript2 –template typescript
npm을 쓰는 방법도 있는데, 그 방법을 쓸 경우 app과 index의 확장자가 일반적인 설치되었을 때 처럼 js로 되어 있다
props,state,hooks가 없으면 일반적으로 짜던 방식 대로 짤 수 있다
props를 들고오는 방법(class형 기준)
- 만든 컴포넌트 tsx의 전역에 인터페이스를 만든다
- 만든 인터페이스를 extends Component옆에 <>에 넣어둔다
- 상위로 가서 해당 컴포넌트 사용 시 옆에 값을 전달해줘야 한다(없으면 에러가 발생함)
props를 들고오는 방법(함수형 기준)
- 인터페이스를 만드는 부분은 동일하다
- props를 넣는 곳에 똑같이 props를 넣는데 타입 지정을 해주는 과정이 추가된다(props:interface이름)
- class형 3번과 동일하게 전달할 값을 넣어야 한다
인터페이스를 만드는 부분, 전달할 값 넣어야 하는 부분은 동일하다. 기존에 ts에서 연습했던것처럼 ?를 붙여서 확실하지 않은 부분도 설정 가능하다
state의 경우도 props와 비슷하다
jsx는 constructor(props){super(porps)와 같이 들고오고 쓸 때는
this.state={first:"hi"}}this.state.first처럼 들고 올 수 있지만
tsx에서는 props에서 썼던것처럼 state 관련 interface를 만들어서 props 관련 interface 넣었던 곳에 넣어줘야 한다. 넣어주지 않으면 state를 들고 오지 못한다
ts때처럼 interface에 생성한 변수만큼만 쓸 수 있다.
함수형 state의 경우 조금 다르다
const [a,setA]=useState<타입|여러개면|로 표시>();와 같이 <> 안에 타입을 넣으면 되고 기존에 쓰던 방식처럼 써도 된다.
() 안에 “”를 넣게 되면 문자형 빈 값이 들어가 있어서 useState에 커서를 가져다 대면 자동으로 string으로 잡혀져 있다. 아예 비어 있으면 undefined가 나온다