하나의 파일에서 액션 type, 액션 생성함수, 액션 객체들의 타입, 상태의 타입, 리듀서를 선언하고 있기 때문에 나중에 프로젝트가 커지고 액션의 수가 많아지면 코드가 너무 길어지게 된다. 그렇게 되면 개발할 때 찾고자 하는 것을 찾기 위해 스크롤을 많이 해야 돼서 생산성을 저하시킬 수 있다. 방법은 하나의 디렉터리를 만들어서 그 안에 여러 개의 파일을 작성한다. 분리해서 파일을 관리하면 유지보수에 편리하다. modules todos actions.ts index.ts reducer.ts types.td counter.ts # 파일이 그렇게 길지 않은 경우 그냥 파일 하나로 작성 src/modules/todos/actions.ts import { deprecated } from "typesafe-acti..

typesafe-actions 는 리덕스를 사용하는 프로젝트에서 액션 생성 함수와 리듀서를 쉽고 깔끔하게 작성할 수 있게 해주는 라이브러리이다. 더보기 예) 액션 생성 함수 // 액션타입이 'ADD' 인 액션생성 함수, payload 값은 number const add = createStandardAction('ADD')(); add(10); // { type: 'ADD'', payload: number } 프로젝트 설치 $ yarn add typesafe-actions 카운터 리덕스 모듈 리팩토링 src/modules/counter.ts 액션 타입 선언 const INCREASE = 'counter/INCREASE'; const DECREASE = 'counter/DECREASE'; const INCR..

투두리스트 리덕스 모듈 작성하기 src/modules/todos.ts filter 함수를 통해서 조건에 해당하는 것(todo.id !== action.payload) 만 필터링해서 새로운 배열을 만들어서 현재상태에 반환하였기 때문에 조건과 일치하지 않는 것(todo.id === action.payload) 은 새로운 배열에 들어가지 못하고 제거되는 것이다. // 액션타입 선언 const ADD_TODO = 'todos/ADD_TODO' as const; const TOGGLE_TODO = 'todos/TOGGLE_TODO' as const; const REMOVE_TODO = 'todos/REMOVE_TODO' as const; let nextId = 1; // 새로운 항목을 추가할 때 사용할 고유 ID..

프로젝트 생성 $ npx create-react-app ts-react-redux-tutorial --template typescript 모듈 추가 설치 yarn add redux react-redux yarn add @types/react-redux redux 의 경우엔 자체적으로 타입스크립트 지원이 되지만 react-redux 는 지원되지 않아 개별적으로 타입스크립트를 설치해주어야 한다. 프로젝트의 node_modules 에서 각 모듈명 파일에 index.d.ts 라는 파일의 유무를 통해 타입스크립트를 지원하는지 확인 할 수 있다. 써드파티 라이브러리인 @types/라이브러리명 입력을 통해 라이브러리에 타입스크립트를 지원할 수 있다. 더보기 👀 써드파티 라이브러리 공식적인 타입스크립트 지원이 아닌 커..

props 를 여러 컴포넌트를 거쳐 값을 자식 컴포넌트에게 전달해주지 않고도, contextAPI 를 사용하면 컴포넌트가 어느 위치에 있던 다른 컴포넌트에게 바로 사용할 수 있도록 값을 전달해줄 수 있다. 이를 타입스크립트에서 활용하려고 한다. 타입 선언하기 // 필요한 타입들을 미리 선언 type Color = 'red' | 'orange' | 'yellow'; // 상태를 위한 타입 type State = { count: number; text: string; color: Color; isGood: boolean; }; // 모든 액션들을 위한 타입 type Action = | { type: 'SET_COUNT'; count: number } | { type: 'SET_TEXT'; text: stri..