TypeScript 공부하기 2) 컴포넌트와 폴더정리

듣던 강의의 프로젝트를 완전히 타입스크립트로 컨버트하려고 했는데 또 리덕스가 문제였다. redux -> type도 있고 redux toolkit -> type도 있는데 redux-actions는 없다. npm 페이지도 찾아가보니 더이상 업데이트가 어렵다고 하는 글밖에는...
props타입지정을 다 any로 해주면 그냥 넘어가긴 하는데 그러면 그냥 jsx랑 다를게 없잖아.

어쩔 수 없이 지금 프로젝트는 절반정도만 타입스크립트로 하고 새로운 프로젝트부터 제대로 적용하기로 했다.

새 프로젝트를 깔아서 리액트 환경설정을 다시 보고 세팅을 다 해둔 후 폴더 구축을 시작했다.

근데 인덱싱 하는 부분을 ts로 바꾸면 자꾸 에러가 나서 구글링했다.
타입 지정하지 않고 임포트하는 부분이 잘못됐었나보다.

export { default as Login } from "./Login";
export { default as Main } from "./Main";
export { default as PostDetail } from "./PostDetail";
export { default as PostWrite } from "./PostWrite";
export { default as SignIn } from "./SignIn";

이런식으로 import -> export가 아닌 개별 파일을 export시키니까 더이상 오류가 뜨지 않았다. 약간 노가다긴 한데 한번 해두면 다른 곳에서 편하게 불러올 수 있다.

import { Login, Main, PostDetail, PostWrite, SignIn } from './page';

page 폴더에 index.ts로 인덱싱한 다음, app.tsx에서 단 한줄이면 페이지들을 다 소환할 수 있다. 원래는 어떻게 했었는지 돌이켜보자.

....
import Main from "../pages/Main";
import PostDetail from "../pages/PostList";
import Login from "../pages/Login";
import Signup from "../pages/Signup";
import PostWrite from "../pages/WritePost";
....

폴더구조는 이렇게 맞추고 전역에서 쓸 헤더나 푸터같은 애들도 section에 모아서 인덱싱으로 app.tsx에만 부르면 편하다.

page
components
 \ parts
 \ section
elements
shared