🥹 타스 스터디 회고
솝트 들어올 때 지원서에도 타스스터디 꼭 하고싶다고 작성했던 ,, 타스바라기 ,,
예전에 피로그래밍 활동 때 알게 된 프런트 개발자분께 '프런트가 꼭 알아야 할 기술이 있다면 ?' 이라고 여쭤봤을 때 정말 0.1초만에 타입스크립트는 필수다라고 하셨던 기억이 있어서 ,, 두솝 들어오면 꼭 ! 타스스터디 해야지, 없으면 내가 스장 해야지 ~ 라고 생각했었는데
너무너무 감사하게도 타스 스터디가 있었구 ! 바아로 지원했다 !
정말 타스의 ㅌ 도 모르고 any가 뭐에요 ? 정말,, 아무것도 모르고 스터디 들어와서 걱정 이만저만 아니였는데 천재만재 타코들이 진행도 잘 해주고 최최고 스장님 덕에 (너네 에버랜드가서 타스 질문 받아주는 스장 봤냐) 타스를 마주해도 전혀 무섭지 않아 (살짝은 무서워) 졌슴당 ! ㅎㅎ
내 깃허브에 이런게 남다니 감개무량
마지막 아티클로는 ,, ! 합세를 할 때 마주한 리액트에서 타스를 사용한 경우에 대해 작성해보려 합니다 ,,
📍 props의 타입 interface로 지정하기
interface란 ?
인터페이스는 두개의 시스템 사이에 상호 간에 정의한 약속 혹은 규칙을 포괄하여 의미한다. 혹은 객체의 껍데기 또는 설계도라고 할 수 있다.
(api를 가져와서 api의 데이터 모양(구조)이 어떻다 라는 것을 인터페이스로 정의할 때 많이 사용된다고 한다 !)
🤔 인터페이스 사용의 장점
- 오탈자 방지
- 가독성 좋은 코드
- 협업 시 상호간의 약속으로 동일한 규칙이 적용된 코드 작성 가능
사실 처음 인터페이스를 배웠을 땐 잘 와닿지 않았다 .. 인터페이스가 뭐죠 ,,? 그냥 객체 아닌교 ,, 라고 생각했다 ,,
근데 합세 시작하고 타스를 본격적으로 사용하게 되니 정말 필수 아닌 필수 필수 필필수인 인터페이스 !!
대표적으로 많이 사용되는 경우는
1. 컴포넌트가 Prop을 전달받을 때
2. 서버에서 받아온 데이터를 사용할 때
인 것 같다.
1. 컴포넌트가 props를 전달받을 때
- 전달받을 prop에 있는 데이터들의 타입을 미리 인터페이스로 지정해두기
- props의 타입을 미리 정의한 인터페이스로 지정하기
// HotelItem.tsx
export interface HotelItemProps {
hotelImg: string;
hotelName: string;
hotelRoom: string;
hotelBed: string;
hotelRate: number;
hotelReview: string;
hotelPrice: string;
}
const HotelItem = (props: HotelItemProps) => {
const { hotelImg, hotelName, hotelRoom, hotelBed, hotelRate, hotelReview, hotelPrice } = props;
return ( ... )
}2. 서버에서 받아온 데이터를 사용할 때
- API 명세의 데이터 형식에 따라 타입 지정
// types > ticketList.ts
export interface MinPriceListData {
airId: number;
airName: string;
minPriceString: string;
}
export interface airMinPriceDtoList {
airMinPriceDtoList: MinPriceListData[];
}
export interface MinPriceResponse {
data: airMinPriceDtoList;
}- 데이터를 받아오는 함수에 정의해둔 인터페이스 사용하기
// src > apis > getMinPriceList.ts
import { MinPriceResponse } from '../types/ticketList';
export const getMinPriceList = () => {
return client.get<MinPriceResponse>(`air/min-prices`);
};
// src > components > ticketList > DropDown.tsx
// GET - 해당날짜 항공사 필터링 값 가져오기
const getMinList = async () => {
try {
const {
data: { data },
} = await getMinPriceList();
setMinPriceList(data.airMinPriceDtoList);
} catch (e) {
console.log(e);
}
};📍 useState와 typescript
드롭다운 리스트를 구현해야 했고, 현재 클릭된 드롭다운이 어떤 것과 관련된 드롭다운인지를 state에 저장해야 했다.
기존에 구현한 방식은
const [activeDropdown, setActiveDropdown] = useState<string>();과 같은 방식이었는데, 컴파일 과정에서 계속 에러를 내뱉었다
에러 내용은, state의 값이 null일 수 있다는 점 ,,
따라서 좀 더 정밀하게 타입을 지정해주고자 드롭다운의 이름에 사용되는 값들을 미리 타입으로 지정해두고, 해당 타입을 state값의 타입으로 지정하였고, null일 경우에 대한 처리를 위해 유니온 타입을 지정하였다
type DropdownName = 'path' | 'time' | 'duration' | 'flight' | 'recommend';
const [activeDropdown, setActiveDropdown] = useState<DropdownName | null>(null);이렇게 작성하여 에러를 해결했던 기억이 ,,
이때 에러를 해결하며 생각보다 많은 시간을 썼던지라, 타스 정말 까다롭다,, 라고 생각했지만 막상 해결하니 너무 뿌듯했던 기억이 나서 이렇게 기록을 남겨봅니다
📍 ref를 사용할 때 state 지정은 어떻게 하나요?
마찬가지로 드롭다운을 구현할 때, 드롭다운이 열렸을 경우 화면 밖의 아무 곳이나 클릭하면 드롭다운이 닫히도록 구현하기 위해서, custom Hook을 사용하게 되었고 그 과정에서 useRef를 사용해야 했다.
useState의 경우에는 어느정도 타입스크립트와 같이 사용하는게 익숙했지만, useRef는 html의 element들을 가지는 값이기 때문에 타입스크립트 지정이 살짝 어질어질했다 ,,
(이때 타스 스터디에서 계산기 과제할 때 html 요소의 타입들을 많이 지정해본 경험이 도움이 되었습니당 ! ㅎㅎ)
import React, { useEffect } from 'react';
const useClickOutside = (ref: React.RefObject<HTMLElement>, callback:() => void) => {
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (ref.current && !ref.current.contains(event.target as Node)) {
callback();
}
};
document.addEventListener('click', handleClickOutside);
return () => {
document.removeEventListener('click', handleClickOutside);
};
}, [ref, callback]);
};
export default useClickOutside;다음과 같이 ref의 타입을 지정할 때는, React.RefObject<HTMLElement>와 같이 타입을 지정하여 사용해야 한다.
또한, 마우스 이벤트의 경우에도 event: MouseEvent로 지정해서 사용하여야 한다.
하나 둘 셋 타코드라 사랑해 사랑해 !!
