Stack/TypeScript

[TS / React] redux-thunk Middleware

TS-REDUX-TUTORIAL npm install redux-thunk // 또는 yarn add redux-thunk npm install axios * github로부터 내 정보 받아오기 (server로 사용할 것임) https://api.github.com/users/(githun닉넴) https://app.quicktype.io/ Instantly parse JSON in any language | quicktype app.quicktype.io JSON 포맷으로 만들어주는 사이트 ~ index.tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from '...

[TS / React] typesafe-actions을 이용한 refactoring

https://www.npmjs.com/package/typesafe-actions typesafe-actions Typesafe Action Creators for Redux / Flux Architectures (in TypeScript). Latest version: 5.1.0, last published: 3 years ago. Start using typesafe-actions in your project by running `npm i typesafe-actions`. There are 402 other projects in the npm registry www.npmjs.com https://github.com/piotrwitek/typesafe-actions/issues/143 v5.0.0..

[TS / React] Redux로 To-do List 구현

2022.07.28 - [Coding/TypeScript] - [TS / React] Redux로 Counter 구현 [TS / React] Redux로 Counter 구현 react-redux 1. 모듈리듀서 1) 액션타입 지정 2) 액션생성 함수 3) 초기값 4) 리듀서 함수 작성 -> 루트리듀서 2. 스토어 생성 const store = createStore(루트리듀서) 3.컴포넌트 생성 1) 컨테이너 컴포넌트 2).. 7ingout.tistory.com 초기 셋팅은 위 게시글 참고 ~ TS-REDUX-TUTORIAL modules/todos.ts // 액션타입 선언, 액션 생성 함수, 초기값, 리듀서 // 할 일 추가, 할 일 제거, 할 일 체크 // 액션타입 선언 const ADD_TODO = ..

[TS / React] Redux로 Counter 구현

react-redux 1. 모듈리듀서 1) 액션타입 지정 2) 액션생성 함수 3) 초기값 4) 리듀서 함수 작성 -> 루트리듀서 2. 스토어 생성 const store = createStore(루트리듀서) 3.컴포넌트 생성 1) 컨테이너 컴포넌트 2) 프레젠테이션 컴포넌트 npx create-react-app ts-redux-tutorial --template typescript ts-redux-tutorial npm install redux npm install react-redux ts 안붙어있는 react-redux는 타입스크립트를 모듈에 적용시켜야 함 npm install @types/react-redux * 카운터 만들기 1. 모듈리듀서 -> 루트리듀서 -> combine 2. 컴포넌트 modu..

[TS / React] Context API

1. 컨텍스트 만들기 const stateContext = createContext(null) 2. 컨텍스트 사용하기 const state = useContext(stateContext) TS-REACT-TUTORIAL SampleContext.tsx import React, { createContext, Dispatch, useContext, useReducer } from 'react'; type Color = 'red' | 'orange' | 'green' type State = { count: number; text: string; color: Color; isGood: boolean } type Action = {type: 'SET_COUNT'; count: number} | {type: 'SE..

[TS / React] To-Do List 구현

TS-REACT-TUTORIAL InsertTodo.tsx import React from 'react'; type InsertProps = { inputText: string; onChange(text:string): void; onCreate(): void } const InsertTodo = ({ inputText, onChange, onCreate } : InsertProps) => { return ( onChange(e.target.value)}/> 등록 ); }; export default InsertTodo; TodoList.tsx import React from 'react'; import { Todo } from '../App3' type TodoProps = { todos: Todo [..

[TS / React] props 전달

TS-REACT-TUTORIAL components/Greeting.tsx import React from 'react'; type GreetingsProps = { name: string; mark: string } const Greetings = ({ name, mark } : GreetingsProps ) => { return ( Hello, {name} {mark} ); }; export default Greetings; App2.tsx import React from 'react'; import Greetings from './components/Greetings'; const App2 = () => { return ( ); }; export default App2; components/User..

[TS / React] React에서 TS 사용해보기 2 (useReducer)

TS-REACT-TUTORIAL Counter_Reduce.tsx 2022.07.26 - [Coding/TypeScript] - [TS / React] React에서 TS 사용해보기 [TS / React] React에서 TS 사용해보기 npx create-react-app ts-react-tutorial --template typescript 뒤에 --template typescript 붙이면 typescript가 포함된 리액트 폴더를 만들 수 있음 TS-REACT-TUTORIAL Counter.tsx import React, { useState.. 7ingout.tistory.com 여기 Timer를 Reducer로 구현해보자 ! import React, { useReducer } from 'react..

[TS / React] React에서 TS 사용해보기

npx create-react-app ts-react-tutorial --template typescript 뒤에 --template typescript 붙이면 typescript가 포함된 리액트 폴더를 만들 수 있음 TS-REACT-TUTORIAL Counter.tsx import React, { useState } from 'react'; const Counter = () => { const [ count, setCount ] = useState(0) const onIncrease = () => setCount(count + 1); const onDecrease = () => setCount(count - 1); return ( {count} +1 -1 ); }; export default Count..

[TS] Generic

재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언 할 수 있음 타입을 인수로 받아서 사용 function toArray(a: numger | string, b: number | string) : (number | string) [] { return [a, b]; } toArray(1, 2) toArray('a','b') toArray(1, 'a') function toArray(a: T, b:T) :T [] { return [a,b]; } toArray(1, 2) toArray('a', 'b') 제약조건 T extends U 조건부 타입 타입구현 영역에서 사용하는 extends는 삼항 연산자를 사용할 수 있음 이를 조건부 타입이라고 부름 T extends U ? X : Y e..