타입스크립트 (9) 썸네일형 리스트형 Typescript (7) Generics 우선 바로 간단한 예시를 보자 예) export const hi = (arg: string) => { return console.log("Hi", name); }; const v1 = hi("Daniel"); const v2 = hi(1234); // 여기 argument가 string이여야하는데 number을 넣어줬기 때문에 에러가난다 이렇게 hi라는 function을 만들고 arg:string으로 만들어줌으로써 v2의 arg는 number이기 때문에 에러가 난다 이렇게 arg의 type이 항상 똑같이 않을 경우 generics를 쓰는데 다음 generics를 쓴 예시를 보자 export const hi = (arg: T) => { return console.log("Hi", name); }; con.. 코드 정리 (0) Import Path file들을 import 하다보면 path가 너무 복잡해보이는 경우가 자주있다 예) 이렇게 보이는 Path를 심플하게 바꿔줄수있는데 바로 알아보도록 하자 line 17을 보면 paths를 새로 지정해준걸 볼수있다 ./ 로 시작하는 path 모두 다 @/ 로 바꿔주는걸로 세팅을 바꾼거다 이후 다시 파일로 되돌아가면 path가 더 간결해진걸 볼수있다 Typescript (6) Enums Enum은 개발자 도구라고 보면 된다 문자나 숫자를 enum으로 씀으로써 오타를 방지해 준다 그럼 바로 예시를 보자 예) 이렇게 string들을 enum 안에 담에 사용하였다 그러면 console을 봐보자 console에 enum안에 넣어둔 string 값들을 출력하는 줄 알았는데 0 1 2 가 출력됐다 이유는 바로 enum안에 있는 정보들의 값을 숫자로 매기기 때문이다 좋은 점은 이 정보들의 값도 따로 설정을 해줄 수 있는데 한번 해보도록 하자 예) 이렇게 enum의 값을 바꾸려면 정보 = 정보값 을 해주면 된다 이후 다시 실행시킨 뒤 console을 보면 정보값에 따라 잘 나오는 걸 볼 수 있다 Typescript (5) Forms Typescript는 코드를 실행하기 전에 에러를 방지해 준다고 알고 있다 그러면 form을 사용할 때는 어떻게 적용이 되는지 한번 알아보자 우선 예시 코드를 봐보자 예) 내가 input의 onChange value를 console.log() 하고 싶다고 할 때를 예시로 들자 function Square() { const onChange = (event) => {}; return ( Click Me! ); } export default Square; 이렇게 코드를 짜게 되면 event에서 에러가 발생하는데 이유는 event가 any type이기 때문이다 그러면 어떻게 type을 지정해 주면 될까? 예) function Square() { const onChange = (event: React.FormEv.. Typescript (4) useState useState를 쓸 때는 따로 type 지정을 해줄 필요가 없다 예) Default value를 0으로 지정해 줌으로써 state의 type이 number로 지정된다 import { useState } from "react"; function Square() { const [counter, setCounter] = useState(0); setCounter(5); setCounter("hi"); return ; } export default Square; 이런 식으로 useState의 default value의 type에 따라 state type도 같이 지정이 된다 따라서 setCounter(5)를 할 경우 에러가 나지 않고 setCounter("hi")를 할 경우에 에러가 나게 된다 하지만 내가 st.. Typescript (3) Optional Props Component에 props를 지정해 줄 때 가끔은 optional props를 지정해 줘야 될 때가 있다 예) import React from "react"; import Square from "./Square"; function App() { return ( ); } export default App; 이런식으로 첫 번째 square component는 txtColor가 필요하고 두 번째 square component는 txtColor이 필요 없다 예) import styled from "styled-components"; interface WrapperProps { bgColor: string; txtColor: string; } const Wrapper = styled.div` backgroun.. Typescript (3) Props 사용하기 Typescript (2)에서 봤다시피 props를 component로 잘 갖고 온 후 이제 props를 쓰는 방법에 대해 알아보자 예) import styled from "styled-components"; const Wrapper = styled.div``; interface bgColorProps { bgColor: string; } function Square({ bgColor }: bgColorProps) { return ; } export default Square; 우선 Wrapper의 bgColor props를 만들고 거기 안에 square component가 받은 bgColor props로 색깔을 지정해 준다 하지만 이렇게 하면 또 에러가 발생하는데 바로 Wrapper에서 bgColor .. Typescript (2) Props Component를 부를 때 props를 주곤 한다 예) Square component에 bgColor props를 주었다 import React from "react"; import Square from "./Square"; function App() { return ( ); } export default App; 이렇게 square component에 props를 준 뒤에는 square component에서 props를 받아야 되는데 간단하다 예) import styled from "styled-components"; const Wrapper = styled.div``; function Square({bgColor}) { return ; } export default Square; 이런 식으로 pr.. 이전 1 2 다음
