[TypeScript] 타입스크립트와 리액트 같이 사용하기

※ cmd에 아래의 명령어 작성  (리액트 타입스크립트 설치)
→ npx create-react-app ts-react --template typescript

 

- 리액트 타입스크립트의 확장자는 tsx다 !!!

 

1. 자식 컴포넌트에 props를 넘겨주는 방법

 

1) 부모 컴포넌트에 자식 컴포넌트에게 넘겨줄 props 작성

 

- App.tsx 

import './App.css';
import Hello from './components/Hello';

function App() {
	return (
    	<div className="App">
        	<Hello name="green" message="안녕하세요"/>
        </div>
    );
}

export default App;

2) 자식 컴포넌트에 interface생성 후 각각의 props 타입을 지정

3) 받아온 props를 구조분해할당 후 interface 타입명으로 지정

 

- Hello.tsx

interface HelloProp {
    name: string;
    message: string;
}
const Hello = ({name, message}: HelloProp) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>{message}</p>
        </div>
    );
};

export default Hello;

 

message props를 필수 속성으로 사용하고 싶지 않을 때

import './App.css';
import Hello from './components/Hello';

function App() {
	return (
        <div className="App">
            <Hello name="green" message="안녕하세요"/>
            <Hello name="blue"/>
        </div>
    );
}

export default App;

그냥 저렇게만 적으면 막 뭐라한다... 

그래서 Hello.tsx에 가서 message를 옵셔널 프로퍼티로 바꿔주면 해결 !

interface HelloProp {
    name: string;
    message?: string;
}
const Hello = ({name, message}: HelloProp) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>{message}</p>
        </div>
    );
};

export default Hello;

 다시 App.tsx로 가면 에러가 뜨지 않는 걸 확인할 수 있다.

 

 

함수를 넘겨주고 싶을 때

import './App.css';
import Hello from './components/Hello';

const onClick = () => {
	console.log(`${name}님 안녕하세요^^`);
}
function App() {
	return (
    	<div className="App">
        	<Hello name="green" message="안녕하세요" onClick={onClick}/>
        </div>
    );
}

export default App;

방법은 매우 간단하다. 그냥 자식 컴포넌트의 interface에 onClick함수의 타입을 지정해주면 끝 !

interface HelloProp {
    name: string;
    message?: string;
    onClick: (name: string) => void; // void = 리턴하지 않는다
}
const Hello = ({name, message, onClick}: HelloProp) => {
    return (
        <div>
            <h2>{name}</h2>
            <p>{message}</p>
            <div>
                <button onClick={() => onClick(name)}>클릭하세요</button>
            </div>
        </div>
    );
};

export default Hello;

 

 

---

 

2.  useState의 state 타입 지정하기

 

상태의 타입이 변경되지 않는 경우는 생략할 수 있다.

상태가 null일 수도 있고 아닐 수도 있을 때 제네릭 타입을 활용하여 지정한다.

 

const [state, setState] = useState<number>(0)
타입 유추 : 제네릭 타입 생략 가능 => const [state, setState] = useState(0)

 

 

type stateObject = {name: string, age: number}
const [state, setState] = useState<null | stateObject>(0)

 

 

---

 

3. useReducer의 reducer함수 타입 지정하기

 

1) reducer 함수 생성

reducer함수는 새로운 상태를 리턴하기 때문에 리턴문 타입을 반드시 지정해야 한다 !

function reducer(state: 상태의 타입, action: 액션 객체 타입): 리턴문 타입 {
	// switch문 작성
}

 

2) 상태의 타입 지정 (상태의 타입이 여러 개가 아니라면 리듀서 함수에 바로 타입 지정해도 된다.)

type State {
	count: number
}

 

3) 액션 객체의 타입 지정(올 수 있는 액션 객체를 유니언 타입으로 나열)

type Action = {type: 'INCREASE'} | {type: 'DECREASE'}

 

완성된 리듀서 함수 예제 >

import React, { useReducer } from 'react';

// 액션 객체를 위한 타입 지정
type Action = {type: "INCREASE"} | {type: "DECREASE"}
// 상태의 타입은 number, 액션 객체의 타입은 리터럴 타입으로 지정한 Action타입이다
// 리듀서 함수의 리턴문 타입은 number이다
function reducer(state: number, action: Action ):number {
    // switch문 작성
    switch(action.type) {
        case 'INCREASE':
            return state + 1;
        case 'DECREASE':
            return state - 1;
        default:
            return state;
    }
}

 

 

---

 

 

리액트 타입스크립트를 사용한 간단한 카운터 만들기 - useReducer 사용