TypeScript 기초
TypeScript 기초
- JavaScript를 기반으로 한 프로그래밍 언어
JS와 TS의 차이
JS
const plus = (a, b) => a + b;
TS
const plus = (a:number, b:number) => a + b;
Type을 지정해야 한다.
문제가 없으면 JS 코드로 return한다.
잘못된 props를 보내게 된다면 오류를 보내준다.
💡Prop Types는 prop이 있는지 없는지 코드를 실행 후 확인해준다.
TS로 React App 생성 및 살펴보기
🔧 npx create-react-app [프로젝트 명] --template typescript
🔧 npm i --save-dev @types/styled-components
🔧 npm install --save styled-components
Interface
- object의 shape를 설명해준다.
/src/Circle.tsx ```ts interface ContainerProps { bgColor: string; borderColor: string; }
const Container = styled.div
interface CircleProps { bgColor: string; borderColor?: string; }
function Circle({ bgColor, borderColor }: CircleProps) { return <Container bgColor={bgColor} borderColor={borderColor ?? bgColor} />; }
export default Circle;
💡 'borderColor?'는 borderColor를 사용할 수도 있고 안할 수도 있다는 의미이다.
💡 'borderColor ?? bgColor'는 borderColor가 있다면 사용하고 없다면 bgColor를 사용하라는 의미를 갖는다.
#### State
React JS에서 사용하는 state와 기능은 동일하지만 TS에서는 default값에 따라 type이 설정된다.<br>
만약 number 또는 string 타입이 되기를 원한다면 아래와 같이 사용해야한다.
```js
const [value, setValue] = useState<number|string>(1);
setValue(3);
setValue("helloworld");
Form
Log In Form 예시
function App() { const [value, setValue] = useState(""); const onChange = (event: React.FormEvent<HTMLInputElement>) => { const { currentTarget: { value }, } = event; setValue(value); }; const onSubmit = (event: React.FormEvent<HTMLFormElement>) => { event.preventDefault(); console.log("hello", value); }; return ( <div> <form onSubmit={onSubmit}> <input value={value} onChange={onChange} type="text" placeholder="username" /> <button>Log in</button> </form> </div> ); }
💡 ‘event: React.FormEvent’: Form에서 발생되는 이벤트를 받아온다.
💡 ‘
📕 ES6 문법
const value = event.currentTarget.value;
const id = event.currentTarget.id;
const tagName = event.currentTarget.tagName;
const width = event.currentTarget.width;
위의 코드를 아래와 같이 묶어서 편리하게 사용할 수 있다.
const {
currentTarget: { value, id, tagName, width},
} = event;
Theme
/src/styled.d.ts 파일 생성
💡 ‘styled.d.ts’에서 ‘d’는 declaration(선언)을 의마한다.
라이트 모드 & 다크 모드 만들기
/src/styled.d.ts
import "styled-components";
declare module "styled-components" {
export interface DefaultTheme {
textColor: string;
bgColor: string;
btnColor: string;
}
}
/src/theme.ts
import { DefaultTheme } from "styled-components";
export const lightTheme: DefaultTheme = {
bgColor: "white",
textColor: "black",
btnColor: "red",
};
export const darkTheme: DefaultTheme = {
bgColor: "black",
textColor: "white",
btnColor: "blue",
};
/src/index.tsx
root.render(
<React.StrictMode>
<ThemeProvider theme={darkTheme}>
<App />
</ThemeProvider>
</React.StrictMode>
);
/src/App.tsx
const Container = styled.div`
background-color: ${(props) => props.theme.bgColor};
`;
const H1 = styled.h1`
color: ${(props) => props.theme.textColor};
`;
function App() {
return (
<Container>
<H1>Hello World!</H1>
</Container>
);
}
React Query
- 편리한 방식으로 데이터를 fetch 시킨다.
react-router-dom 설치
⚠️ 5.3.0 주의
🔧 npm i react-router-dom@5.3.0 react-query
import 오류 해결하기
🔧 npm i --save-dev @types/react-router-dom
Router (react-router-dom@6.4.5)
Routes (변경 전: Switch)
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/:bookId" element={<Book />} />
</Routes>
</BrowserRouter>
);
}
⚠️react-router-dom@5.3.0 구버전 참고용
/src/routes/Coin.tsx
interface RouteParams {
coinId: string;
}
function Coin() {
const { coinId } = useParams<RouteParams>();
return <h1>Coin: {coinId}</h1>;
/src/Router.tsx
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Coin from "./routes/Coin";
import Coins from "./routes/Coins";
function Router() {
return (
<BrowserRouter>
<Switch>
<Route path="/:coinId">
<Coin />
</Route>
<Route path="/">
<Coins />
</Route>
</Switch>
</BrowserRouter>
);
}
export default Router;
/src/App.tsx
import Router from "./Router";
function App() {
return <Router />;
}
export default App;
Style
Reset CSS
- 기본 CSS를 초기화 시켜준다.
Reset CSS 살펴보기
Fragments
- 일종의 유령 컴포넌트로 부모 없이 여러 자식들을 그룹화하고 리턴할 수 있게 해준다.
function App() { return ( <> <GlobalStyle /> <Router /> </> ); }
API 가져오기
Axios
- 사용한 이유… FIXME:
🔧 npm install axios
소통 과정: request 후 response가 성공적으로 오면 처리한다.
Ajax Jquery
Fetch
Hook
useEffect
useState
useQuery
- React Query를 이용하여 서버로부터 데이터를 조회해 올 때 사용한다.
useMatch(useRouteMatch)
useNavigate(useHistory)
useScroll(useViewScroll)
React Query
- 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는데 사용
- fetcher 함수를 구성할 수 있게 하여 함수가 호출 됐는지 여부를 알려준다.
- 캐싱 매커니즘을 갖고있다. 고유한 key 값을 넘겨주면 Loading 같은 것을 다시 보여주지 않는다.
⚠️ react: ^18.2.0 사용
🔧npm install @tanstack/react-query
index.tsx ```js import { QueryClient, QueryClientProvider` } from “react-query”;
const queryClient = new QueryClient();
root.render( <QueryClientProvider client={queryClient}> <ThemeProvider theme={lightTheme}>
'ThemeProvider'와 같이 APP에서 사용하기 위해 'QueryClientProvider'로 감싸준다.<br>
### React Query Devtools
- 보여준다.
#### 캐시 확인하기
### Hook: useQuery (API 사용하기)
> api.ts
```js
export async function fetchCoins() {
return fetch("https:/api.coinpaprika.com/v1/coins").then((response) =>
response.json()
);
coin.tsx
function Coins() { const { isLoading, data } = useQuery<ICoin[]>(["allCoins"], fetchCoins); return ( ... 생략‘isLoading’:
‘data’:
React Helmet
- 문서의 Head를 변경해준다.
🛠️ npm install react-helmet
🛠️ npm i --save-dev @types/react-helmet
import { Helmet } from "react-helmet";
<Container>
<Helmet>
<title>To the Moon ☽</title>
</Helmet>
</Container>
Enum
- 열거형으로 이름이 있는 상수들의 집합을 정의한다.
숫자형 열거(default)
export enum Categories {
"TO_DO", //0
"DOING", //1
"DONE", //2
}
문자형 열거
export enum Categories {
"TO_DO", //0
"DOING", //1
"DONE", //2
}