250213 목 TIL

react/next 학습 중

 

flex frog: flex 학습하기 좋은 게임

https://flexboxfroggy.com/#ko

Flexbox Froggy

react에서 a 태그를 안 쓰는 이유 : a태그를 쓰면 새로고침돼서 화면이 깜빡임. Link를 대신 쓴다.

--

tsx 파일 = 타입스크립트 + jsx

--

*팁: tsx에서 반복문을 사용할 때 key를 추가해 구분 가능하게 해야 한다.

<ul>

        {pageDto.items.map((item: any) => {

          return (

            <li key={item.id}>

              <div>id: {item.id}</div>

            </li>

          );

        })}

      </ul>

--

타입스크립트 타입 선언 예시

type PostDto = {

  id: number;

  title: string;

  content: string;

 

};

type PostPageDto = {

  currentPageNo: number;

  pageSize: number;

  totalPages: number;

  totalItems: number;

  items: PostDto[];

};