짧은코딩

CRA로 RTK도 같이 설치하기 npx create-react-app my-app --template redux-typescript 이 명령어를 입력하면 리액트 폴더를 만들 때 Redux-ToolKit도 같이 설치하게 된다. 설치된 초기 코드 https://github.com/5hyun/redux_study/tree/main/RTK GitHub - 5hyun/redux_study Contribute to 5hyun/redux_study development by creating an account on GitHub. github.com 코드를 보기 위해서는 위 깃허브를 참고하면 된다. 중요하게 볼 폴더 app과 features 폴더를 참고하면 리덕스 툴킷 공부에 도움이 될것이다. -app app에는 da..

React FunctionComponent interface P { name: string, title: string, } // ReactElement는 굳이 안해도 된다. const WordRelay: FunctionComponent = (): ReactElement => { } FC가 FunctionComponet의 줄임말이다. 리액트 17버전에서는 VFC도 있었는데 18버전에서는 사라졌다. VFC와 FC의 차이는 VFC는 children이 없고 FC는 childrend이 있다. 따라서 FC children를 사용하고 싶다면 interface P { name: string, title: string, children?: ReactNode | undefined; } const WordRelay: FC ..

npm이 TS인 경우 reduce https://www.npmjs.com/package/redux redux Predictable state container for JavaScript apps. Latest version: 4.2.0, last published: 4 months ago. Start using redux in your project by running `npm i redux`. There are 16342 other projects in the npm registry using redux. www.npmjs.com redux의 공식 사이트이다. 사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다. axios axios도..

함수 리턴값 타입 위치 function add(x: number, y: number): number { return x + y; } 리턴값 타입 위치는 이렇게 매개변수 뒤쪽에 붙여야한다. function add(x: number, y: number): number; function add(x, y) { return x + y; } 혹은 이렇게 타입만 선언하고 다음에 내용을 선언하는 경우도 있다. 화살표 함수 const add: (x: number, y: number) => number = (x, y) => x + y; 이렇게 매개변수의 타입 위치가 찾기 어렵게 있다. 이런 경우 타입을 다 지웠을 때 js 문법에 맞게 되도록 코딩을 하면 어느정도 맞다. type Add = (x: number, y: num..