TS (7) 썸네일형 리스트형 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.. Typescript (1) Typescript Typescript 이란 Javascript을 기반한 strongly-typed language이다. 이게 무슨 뜻이냐면 프로그램을 돌리기도 전에 에러가 보이게끔 해주는 것이다 예) const plus = (a,b) => a+b plus(2,2) plus(3,"hi") 이 예시를 보게 되면 javascript는 두 번 불러온 plus()를 둘 다 작동시킨다 하지만 내가 a, b가 무조건 number이라고 지정하고 혹여 plus(3, "hi")와 같이 내가 a 또는 b에 string을 넣게 되면 나의 실수를 알려주길 바란다. 이러한 실수나 에러를 run 하기 전에 미리미리 알려주는 게 바로 typescript이다 이전 1 다음
