54일차 TIL (Lv.2과제 완료 / 후발대 강의)

 

📦src
 ┣ 📂components
 ┃ ┣ 📜Form.tsx
 ┃ ┣ 📜Header.tsx
 ┃ ┣ 📜Todo.tsx
 ┃ ┗ 📜todos.ts
 ┣ 📂pages
 ┃ ┣ 📜Detail.tsx
 ┃ ┗ 📜Home.tsx
 ┣ 📂redux
 ┃ ┣ 📂config
 ┃ ┃ ┗ 📜configStore.ts
 ┃ ┗ 📂modules
 ┃ ┃ ┗ 📜todo.tsx
 ┣ 📂shared
 ┃ ┗ 📜Router.jsx
 ┣ 📂styles
 ┃ ┗ 📜GlobalStyle.tsx
 ┣ 📜App.css
 ┣ 📜App.tsx
 ┣ 📜DetailPage.tsx
 ┣ 📜index.css
 ┣ 📜index.tsx
 ┣ 📜react-app-env.d.ts
 ┣ 📜reportWebVitals.ts
 ┗ 📜setupTests.ts

사실 다 짜놓고 보면 jsx 타입과 크게 다를 건 없는데 너무 복잡하게 접근했던거 같다

기존의 코드에서 tsx로 변경 후 타입을 지정해 주고 props로 주고 받을 때에도 타입을 지정해 주면서 확인하며 체크하는게 아직까지는 생소하다

너무 헤매이다가 타 수강생분들의 과제에서 힌트를 얻었다

왜 이렇게 짰는지 되물어 보며 다시 remind 해보고,

이 부분의 로직이 없으면 어떻게, 어떤 error가 발생하는지 체크하며 나름 꼼꼼하게 체크해보았다.

 

기본 index.html 파일은 public 폴더에 있으며

나머지 컴포넌트들은 전부 src에 위치해 있다

 

redux - modules - todo에 기본 initialState를 선언하고 todo의 구현하게 될 상태 ( 추가, 삭제, 변경과 읽어오기 )를 각각 선언해 주었다

같은 위치에 cofig - configStore를 생성하여 스토어를 만들어 상태 트리를 관리한다

const rootReducer = combineReducers({

todos

})

const store = createStore(rootReducer);

export default store;

export type RootState = ReturnType<typeof rootReducer>

 

이런식으로 export 할 때 type을 지정해 줘야한다