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 = ..

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..

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-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-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-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..

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..

재사용을 목적으로 함수나 클래스의 선언 시점이 아닌, 사용 시점에 타입을 선언 할 수 있음 타입을 인수로 받아서 사용 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..

interface 타입스크립트 여러 객체를 정의하는 일종의 규칙, 구조 interface IUser { readonly name: string, // readonly: 할당은 가능하지만 수정은 불가 age: number, isAdult? : boolean // 선택 속성(필수가 아님) } let user1: IUser = { name: 'Neo', age: 20 } interface IName { (매개변수: 매개변수타입) : 리턴 타입지정 } interface IGetUser { (name: string) : IUser } 함수 오버로드 이름은 같지만 매개변수 타입과 반환 타입이 다른 여러 함수를 가질 수 있는 것 함수 오버로드를 통해 다양한 구조의 함수를 생성하고 관리할 수 있음 keyof 인덱싱 가..

* 타입 추론 명시적으로 타입 선언이 되어 있지 않은 경우, 타입스크립트는 타입을 추론해서 제공함 1) 초기화된 변수 let num2 = 20 // number 2) 기본값이 설정된 매개변수 function add(a: number, b = 2) { // b: number = 2 } 3) 반환 값이 있는 함수 function add(a: number, b = 2) { return a + b } * 타입 단언 타입 추론을 통해 판단할 수 있는 타입의 범주를 넘는 경우 더 이상 추론하지 않도록 지시하는 것 ex06_union // 타입 추론 // 1. 초기화 된 변수 2. 기본값이 설정된 매개변수 3. 반환값이 있는 함수 let num = 20 function addFunc(a: number, b = 2) ..