[TypeScript] React 에서 사용하기 2

지난 포스팅에서 설치만했으니까 이제 사용하는 방법!!

스파르타 내배캠 프론트엔드과정 원장님 추가세션 수업들은 내용 정리 ^.^

 

1. typescript 문법을 쓰지 않아도 컴파일러가 추론해서 에러를 잡아준다.

javascript 로 작성해보고 오류를 잡아나가면서 수정해 보자.

아래 두 문장은 javascript에서는 가능하지만 typescript에서는 에러를 발생시켜 준다.

첫 문장에서 a는 number 타입으로 정해졌기 때문에.

const a = 1;
a = "hell";  // 에러 발생

 

2. useState hook 추가해보기

아래 useState 구문에서 타입을 정해주지 않아도 컴파일러가 추론해서 number는 number 타입이구나 라고 알고 있다.

const [number, setNumber] = useState(0);

 

필요에 따라 타입을 명시 할 수도 있다. (generic을 사용했는데 다음기회에.. 정리할수있을까)

const [number, setNumber] = useState<number>(0);

 

3.  함수에 input 추가해보기 : 매개변수 만큼 마이너스/플러스 하는 함수 

함수에는 input과 output이 있다.( = 매개변수를 받아서 리턴을 해주는 것)

이어서 위에 선언한 number state를 set하는 버튼 handler에 input 부분을 추가해보자!!

const handleMinusButtonClick = function (tempValue : number) { //매개변수를 number type으로 받겠다
	setNumber(number - tempValue);
}

const handlePlusButtonClick = function (tempValue : number) {
	setNumber(function(prev){ 
	return prev+tempValue;
	});
// 위와 같은데 반복해서set해도 화면 업데이트가 되는, batch 처리에 대응가능한 코드 복습임
// (여기서는 위처럼써도됨)
}

호출 부분은 똑같이 써주면된다. 받기로한 number만 넘겨준다면!!

{/* 호출 부분 (3을 인자로 넘겨줘본다) */}
<button onClick={()=>handleMinusButtonClick(3)}> -3 버튼 </button>
<button onClick={()=>handlePlusButtonClick(3)}> +3 버튼 </button>

 

4. 함수에 output 추가해보기 : 현재 숫자를 출력해주는 string을 리턴해주는 함수

// string 위치를 잘보삼.. 리턴을 string으로 하겠다!
const createAlertMsg = (): string => {
	return `현재 숫자는 ${number} 입니다.`;   //실제로 string을 리턴하고 있다!
}

 

호출 부분은 역시 차이없음 : alert("이 위치에 위에서 보내준 string 이 들어온다") 
// 이 함수를 + , -  핸들러 아래에 써주면 alert 이 뜨겠쥬..?

const alertMsg = ()=> {
	alert(createAlertMsg());
}

 

5. 컴파일 시점 vs 런타임 시점 생각해보기

typescript를 쓰면서 런타임이 아닌 컴파일 시점에서 미리 잘못된 값을 체크해서 런타임의 에러를 예방 할 수 있다.

6. 여기서 숙제 : input, output 이 있는 함수

함수를 하나만듭니다.
문자열 1개, 숫자 1개를 input으로 받습니다.
문자열과 숫자를 조합해서 output으로 내보냅니다. (string)
in, out 에 대한 type을 모두 명시합니다.

// number와 string을 받고 string을 내보내는 함수
function (num : number, str : string ) : string {
	return `${num}은 ${str} 입니다.`
}

 

7. 객체 배열은 어떻게 다루나~!!!

generic  <> 이 나오는데.. 아까도 나왔구나, 사용하는 법만 보자!

useState  <타입> ();   이렇게 써주면되는데
useState <number> (); 위에서 이렇게 써줬듯이

 

객체의 타입은 ? <{객체}>
객체배열의 타입은 ?  < {객체} [] >

const [fetchData, setFetchData] = useState <{
  id:number,
  title:string,
  contents: string,
  isDone: boolean
}[]>();

//useEffect에 database를 아래처럼 가지고 온다고 가정
const data = await axios.get('http://localhost:3000/todos');
setFetchedData(data);

 

8. 위 내용을 type으로 선언 해서 갈아끼자 (type 대신 Interface 사용 가능)

객체 타입에 대한 다량의 줄을 여러번 쓰는 비효율 보완! 

//FetchedDataType은 id, title, contents, isDone을 가진 객체의 배열 타입이다. 라고 선언
type FetchedDataType = {
  id:number,
  title:string,
  contents: string,
  isDone: boolean
}[];

const [fetchData, setFetchData] = useState <FetchedDataType>(); //FetchedDataType 타입으로 쓰겠다

이렇게 쓸 수도 있다.
객체타입을 선언해두고 객체 배열을 받는 곳에서는 fechedDataType[] 이렇게 해주면 된다.

//객체로만 선언
type FetchedDataType = {
  id:number,
  title:string,
  contents: string,
  isDone: boolean
};

const [fetchData, setFetchData] = useState <FetchedDataType[]>(); // 객체 배열
const [temp, setTemp] = useState <FetchedDataType>(); // 객체 한개

 

9.  프로젝트 내부의 비효율 보완!

types 폴더 생성
testType.ts 생성

프로젝트 공통으로 사용하도록 Type을 export

//testType.ts
export type TempType= {
  id:number,
  title:string,
  contents: string,
  isDone: boolean
}[];

다른 컴포넌트에서 import 하여 사용하기

// 이렇게 써도 되지만
import {TempType } from "./types/testType";
// 좋은 컨벤션을 위해 type을 붙여주는게 좋다
import type {TempType } from "./types/testType";

//사용
const Test = () => {
const [temp, setTemp] = useState <TempType> ();

 

일단 여기까지 끝~

프롭스랑, 칠드런, 이벤트 핸들러 받는 법은 정리가.. 가능할까?