[리액트] React with Typescript
cra with typescript
npx create-react-app "프로젝트명" --template typescript
tsx
Typescript file writtern using JSX syntax
tsx 파일 만들어보기
// Textfield.tsx
import React from 'react'
interface Person {
firstName: string;
lastName: string;
}
interface Props {
text: string;
ok?: boolean;
i?: number;
fn?: (bob: string) => string;
person: Person;
}
const Textfield: React.FC<Props> = () => {
return (
<div>
<input />
</div>
)
}
export default Textfield
React.FC
: 해당 컴포넌트가 리액트의 함수형 컴포넌트라는 것을 명시
Typescript 사용시 React.FC 주의
The better way to type react components
함수 선언식으로 컴포넌트를 만들면 React.FC는 사용할 수 없고 대신 props를 interface로 넘겨주는 방식으로 체크하게 된다.
함수 선언은 바디가 호이스트되지만, 함수 표현식은 호이스트되지 않는다.
또한 직접, props의 입력을 통해 오류를 방지할 수 있다.
useState with typescript
// ...
interface TextNode {
text: string
}
const Textfield: React.FC<Props> = () => {
const [count, setCount] = useState<TextNode>({ text: 'hello'})
setCount({text: 'test'})
// ...
}
useRef with typescript
// ...
const inputRef = useRef<HTMLInputElement>(null)
const divRef = useRef<HTMLDivElement>(null)
return (
<div ref={divRef}>
<input ref={inputRef}/>
</div>
)
어떤 타입이어야 할 지 잘 모를 때는 마우스 호버 시에 힌트가 뜬다.
useReducer with typescript
시작하기 전 useReducer란
reducer는 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수.
function reducer(state, action) {
// 새로운 상태를 만드는 로직
// const nextState = ...
return nextState;
}
reducer에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태
useReducer
의 사용법
const [state, dispatch] = useReducer(reducer, initialState);
state
는 우리가 앞으로 컴포넌트에서 사용할 수 있는 상태, dispatch
는 액션을 발생시키는 함수
typescript와 같이 사용을 위해서는 state와 action의 type을 정의해주면 된다. 자세한 내용은 코드 참고
Author And Source
이 문제에 관하여([리액트] React with Typescript), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gouz7514/리액트-React-with-Typescript저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)