[ React / project2 ] 기존 프로젝트 변경하기 Vanilia => Type

이 글은 기존 JSX를 TSX로 바꾸는 과정을 정리한 글이다.

TypeScript는 여러가지 이점을 가지고 있다.

1. type이 정해져 있기 때문에 잠재적 애러를 감소 시킨다. vanilia의 경우 type 불일치가 종종 일어난다.
2. 정확한 type 정의는 코드을 읽기 쉽게 만든다. 내가 만든 것이라면 크게 상관없을지 모르지만 다른 사람들과 공유하는/되는 코드는 모든 사람들이 읽기 쉽게 작성하는 것이 좋다.

 

---

1. github Clone

git clone -b {branch_name} --single-branch {저장소 URL} {폴더명}

 

예전에 클론해본다고 하루 날린적이 있는데, 선행학습이 돼서 다행이다.

참조

https://life-explorer.tistory.com/406

---

본격적인 시작

 

2. type 정리

type에 관련된 간단한 영상 등을 학습했다. 학습은 했다는 것은 흐름정도의 이해뿐이다. 하여 직접 진행해 보기로 했다.

type or interface를 상단에 먼저 선언하는 것은 알고 있었다.

fetch data type 정의

 

 

※ 추가적인 학습 가이드가 필요했다. 그래서 Chat GPT와 Gemini를 활용하여 타입을 넣어달라고 부탁했다.

---

여기서부터는 내가 배운 것들 중 숙지가 필요한 부분을 정리하였다.

 

Map Method each item type

- 각각의 map 안에 데이터 정도보 type을 정의해 줘야 한다.

map (i => <div key={i.no} ....) => i : object ,array, string etc

{
  FAQ.map((item : FAQItem) => {
    return <FaqDetail
      key={item.id}
      item={item}
      current={currentId === item.id}
      handleToggleId={handleToggleId}/>
    })
}

 

useState HOOK with prev

- prev의 데이터 정보가 null일 수도 있으니 타입을 추가로 넣어줘야 한다.

Argument of type '(prev: number) => number | null' is not assignable to parameter of type 'SetStateAction<number>'.
Type '(prev: number) => number | null' is not assignable to type '(prevState: number) => number'.
Type 'number | null' is not assignable to type 'number'.
Type 'null' is not assignable to type 'number'.

 

Before

const [ currentId, setCurrentId ] =useState<number >(FAQ[0].id);

const handleToggleId = (id: number) => { setCurrentId(prev => (prev === id ? null : id));};

 

after

const [ currentId, setCurrentId ] =useState<number | null >(FAQ[0].id);

const handleToggleId = (id: number) => { setCurrentId(prev => (prev === id ? null : id));};

 

 

 

Fetching Data SET

- fetching 받은 데이터가 undefined가 될 수 있으니 union 타입으로 추가 필요하다.

Function lacks ending return statement and return type does not include 'undefined'.

 

before

const detailFetch= async () : Promise<ApiResponse> =>{
  try{ const response = await fetch(`http://data4library.kr/api/usageAnalysisList?
  ...
  catch(error){
      console.error("상세 페이지를 가져오는데 문게가 생겼습니다.", error)
  }
}

 

After

const detailFetch= async () : Promise<ApiResponse | undefined> =>{
  try{ const response = await fetch(`http://data4library.kr/api/usageAnalysisList?
  ...
  catch(error){
      console.error("상세 페이지를 가져오는데 문게가 생겼습니다.", error)
  }
}

 

 

Block Scope

- 범주 문제가 있다. (호이스팅이 안되나?)

the type said 'Block-scoped variable 'bookDetailInfoData' used before its declaration.'

 

Variable Position : 변수 위치 바꾸기(데이터가 들어오기 전에 선언이 먼저 된 상태) => 자바스크립트에서는 문제가 없었는데, type에서는 문제가 됨.

 

 

Root Rendering

- 의외였다. rendering에도 작동 안할 때 기입해줘야 한다.

Before

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient} >
      <RouterProvider router={router} />
    </QueryClientProvider >
  </React.StrictMode>
);

 

After

const rootElement =document.getElementById('root');

if(rootElement){
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <QueryClientProvider client={queryClient} >
        <RouterProvider router={router} />
    </QueryClientProvider >
  </React.StrictMode> );
  } else {
  console.error("Root element not found.")
}

 

 

toISOString Method

- 어떤 메서드인지를 정의해줘야 한다(?) 그리고 데이터가 안 들어올 수 있으니, 삼항함수로 null이 출력 될 수 있다는 것도 걸어줘야 한다.

 

Bofore

const onDates = ({ endDate, startDate, }) => {
  const formattedStartDate = startDate?.toISOString().slice(0, 10); // YYYY-MM-DD
  const formattedEndDate = endDate?.toISOString().slice(0, 10);
 
  setSendStartDate(formattedStartDate);
  setSendEndDate(formattedEndDate);
};

 

After

const onDates = ({ endDate, startDate }: DateRangePickersData) => {
  const formattedStartDate = startDate ? new Date(startDate).toISOString().slice(0, 10) : null;
  const formattedEndDate = endDate ? new Date(endDate).toISOString().slice(0, 10) : null;
 
setSendStartDate(formattedStartDate);
setSendEndDate(formattedEndDate);
};

 

 

props drill error

- 프롭전달 시, 발생하는 에러 전달하는 명칭과 받는 명칭이 다를 때 발생.

- interface에서 받는 명칭이 달라져도 발생

typeScript IntrinsicAttributes