타입스크립트 찍먹해보기4

jce1407·2021년 3월 27일
2

TypeScript

목록 보기
4/4
post-thumbnail

Velopert 선생님의 강의를 보고 쓴 글입니다.

** Redux로 만들어보는 TodoList **

액션 타입 & 액션 생성함수 & 액션의 TS 타입 선언

** src/modules/todos.ts **

타입 및 초기 상태 선언

** src/modules/todos.ts **

리듀서 구현

** src/modules/todos.ts **

루트 리듀서 등록

** src/modules/index.ts **

투두리스트 컴포넌트 구현하기 ( Hooks )

  • ** TodoInsert ** : 새 할일 등록하는 컴포넌트
  • ** TodoItem ** : 할 일의 정보를 보여주는 컴포넌트
  • ** TodoList ** : TodoItem의 정보를 하나씩 보여주는 컴포넌트

TodoInsert

** src/components/TodoInsert.tsx **

TodoItem

** src/components/TodoItem.tsx **

TodoItem.css

** src/components/TodoItem.css **

TodoList

** src/components/TodoList.tsx **

App 렌더링하기

** src/App.tsx **

Custom Hook 만들기

  • ** useTodos ** : 할 일들을 조회하는 Hook
  • ** useAddTodo ** : 새로운 할 일을 등혹하는 Hook
  • ** useTodoActions ** : 할 일들 토글 및 삭제 하는 Hook

useTodos

** src/hooks/useAddTodo.tsx **

** src/components/TodoList.tsx **

useAddTodo

** src/hooks/useAddTodo.tsx **

** src/components/TodoInsert.tsx **

useTodoActions

** src/hooks/useTodoActions.tsx **

** src/components/TodoItem.tsx **

마치면서🎉

** TS 찍먹시리즈 **가 이제 끝이 났습니다!
학교 프로젝트와 동아리 코드 유지 보수를 위해 ** TypeScript ** 를 공부해야 했었고
** Velog ** 로 정리도 하고 이것을 만드신 ** Velopert ** 선생님의 강의도 보았습니다.
고퀄리티의 강의를 무료로 배포해 주신 선생님 정말 ** 감사합니다! 🙏 **

강의를 보며 여러 가지를 알게 되었고 또 직접 구현하면서 배우니까 더 빠르게 익힐 수 있었던 거 같아요!
마치면서 기억에 남는 점 들을 정리해보려 합니다.

  • 액션 타입 선언에서 ** as const ** 쓰기
  • 액션 객체 타입 준비시 ReturnType 쓰기
  • ** 컴포넌트 / 컨테이너 ** 구조 대신에 ** Hooks ** 사용하기
  • ** useRef ** 쓸때는 타입을 모두 ** 제네릭 ** 으로 명시하기

대략적인 Redux 플로우

** 1. 액션 타입 선언
2. 액션 생성 함수 생성
3. 액션 객체에 대한 Type준비
4. 상태의 타입과 초기값 선언
5. 리듀서 만들기
6. index쪽에 다 설정 해주기
7. 컴포넌트 와 컨테이너쪽 만들기
8. App에 렌더링 해주기 **

profile
최고의 복지는 좋은 동료, 좋은 동료가 되기 :)

관심 있을 만한 포스트

0개의 댓글