본문 바로가기

React12

React에서 TypeScript 사용하기 - Redux with typesafe-actions TS 사용하지 않고 redux module 코드를 작성할 때는 유틸 함수인 redux-actions 라이브러리를 사용했습니다. action creator나 reducer를 작성할 때 코드의 가독성을 올려줄 뿐만 아니라 코드를 작성하기 편리했습니다. typesafe-actions도 이러한 유틸 라이브러리인데 TS를 지원해줍니다. 먼저 redux-actions를 사용한 redux module의 코드는 다음과 같습니다. import { createAction, handleActions } from "redux-actions" const INCREASE = "counter/INCREASE" const DECREASE = "counter/DECREASE" export const increase = createAc.. 2020. 10. 26.
React에서 TypeScript 사용하기 - Redux TypeScript는 필수 요소가 아니기 때문에 라이버러리를 쓸 때 Type을 지원해줄 수도 있고 안해줄 수도 있습니다. 공식적으로 지원해주는 경우도 있지만 3rd party library형식으로 커뮤니티에서 지원해주는 경우가 있는데 이럴 때 다음 사이트에서 쉽게 확인이 가능합니다. www.typescriptlang.org/dt/search?search=react-redux Search for typed packages Find npm packages that have type declarations, either bundled or on Definitely Typed. www.typescriptlang.org Redux Module Ducks 패턴 ducks 패턴은 redux module을 작성할 때 .. 2020. 10. 26.
React에서 TypeScript 사용하기 - Component, Hooks 만약, TypeScript에 대해 궁금하시다면 아래 링크를 참조해주세요 typescript-kr.github.io/ TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 기존 React Project에 TypeScript 도입 arincblossom.wordpress.com/2019/11/08/%EA%B8%B0%EC%A1%B4-react-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90-typescript-%EB%8F%84%EC%9E%85%ED%95%98%EA%B8%B0/ 기존 React 프로젝트에 TypeScript 도입 + TypeScript로 React 요소 나타내기 기존에 React로 작성된 프로젝트에 T.. 2020. 10. 25.
TypeScript 가이드2 클래스, 제네릭 Class 기존 JS와 다른 점은 프로퍼티를 사전에 선언해야 한다. class Dog { name: string; constructor(name: string){ this.name = name; } bark(word: string){ console.log(`bark ${word}`); } } const dust = new Dog('John'); dust.bark('food'); Class 접근 제한자 접근 제한자에는 public, protected, private가 있으며 프로퍼티 선언시에 생략하면 public이 기본이 접근 제한자가 된다. 프로퍼티 또는 메서드를 제한하는 용도로 쓰인다. public의 경우 클래스 인스턴스, 클래스, 자식 클래스에서 사용할 수 있다. protected는 해당 클래스, 자.. 2020. 10. 21.