Merge branch 'master' of github.com:alstn2468/DoIt_Typescript_Programming

Matching current branch

Author: daniel2231

.DS_Store

@@ -1947,8 +1947,117 @@ const App: React.FC = () => {
 
 ### API 서버에서 실제 데이터 가져오기
 
+[12-3](#12-3-익스프레스로-api-서버-만들기)에서 개발한 API 서버를 동작시킨 후 `React` 프로젝트와 연결을 진행한다.<br/>
+
+```shell
+> npm start
+```
+
+위의 `start` 명령어를 사용해 API 서버를 동작시킨다.<br/>
+그 후 `React` 프로젝트의 `src`폴더에 `IUser.ts`파일으 생성한 후 작성한다.<br/>
+
+- `IUser.ts`
+
+```typescript
+export interface IUser {
+ _id: string;
+ name: string;
+ email: string;
+ sentence: string;
+ profession: string;
+ birthday: Date;
+}
+```
+
+그 후 `src`폴더에 2차 고차 함수 형태의 `getDataPromise` 함수를 작성한다.<br/>
+
+- `getDataPromise.ts`
+
+```typescript
+import { IUser } from "./IUser";
+
+type GetDataPromiseCallback = (a: IUser[]) => void;
+
+export const getDataPromise = (fn: GetDataPromiseCallback) => (
+ skip: number,
+ limit: number
+) =>
+ fetch(`http://localhost:4000/users/${skip}/${limit}`)
+ .then((res) => res.json())
+ .then(fn);
+```
+
+마지막으로 `App.tsx` 파일을 아래와 같이 수정한 후 저장해 반영한다.<br/>
+
+- `App.tsx`
+
+```tsx
+import React from "react";
+import { IUser } from "./IUser";
+import { getDataPromise } from "./getDataPromise";
+
+const App: React.FC = () => {
+ getDataPromise((users: IUser[]) => console.log("users", users))(0, 1);
+
+ return <div className="App">Please open console window!</div>;
+};
+
+export default App;
+```
+
+브라우저를 열어 개발자 도구의 콘솔을 확인하면 아래와 같은 결과를 볼 수 있다.<br/>
+
+<img src="./images/18.png" width="550" height="auto">
+
+위와 같이 API 서버에서 실제 데이터를 가져온 것을 확인할 수 있다.<br/>
+
 ### useState 함수 사용하기
 
+지금까지 작성한 `App` 컴포넌트에는 한 가지 문제점이 있다.<br/>
+
+```tsx
+const App: React.FC = () => {
+ getDataPromise((users: IUser[]) => console.log("users", users))(0, 1);
+
+ return <div className="App">Please open console window!</div>;
+};
+```
+
+서버에서 가져온 `users` 값을 컴포넌트에서 사용할 수 없고 콜백 함수에서만 사용할 수 있다.<br/>
+`React`는 이러한 문제를 해결할 수 있도록 `useState`라는 컴포넌트 상태관리 함수를 제공한다.<br/>
+
+```tsx
+import React, { useState } from "react";
+```
+
+`useState` 함수는 배열에 **비구조화 할당문**을 사용해 아래와 같이 사용할 수 있다.<br/>
+
+```typescript
+const [users, setUsers] = useState<IUser[]>([]);
+```
+
+`useState`의 반환값인 배열의 첫번째 값은 **상태**이며 두번째 값은 **상태를 변경하는 함수**다.<br/>
+`useState`를 사용해 서버에서 가져온 `IUser` 타입 데이터를 아래와 같이 저장할 수 있다.<br/>
+
+- `App.tsx`
+
+```tsx
+const App: React.FC = () => {
+ const [users, setUsers] = useState<IUser[]>([]);
+ getDataPromise((receivedUsers: IUser[]) =>
+ setUsers([...users, ...receivedUsers])
+ )(0, 1);
+
+ return <div className="App">{JSON.stringify(users)}</div>;
+};
+```
+
+작성한 코드를 저장한 후 브라우저를 보면 아래와 같이 실제 데이터가 표시되는 것을 볼 수 있다.<br/>
+
+<img src="./images/19.png" width="500" height="auto">
+
+가져온 데이터를 `users` 상태에 저장한 후 문자열 형태로 변한해 화면에 보이게 된다.<br/>
+
 ### useEffect 함수 사용하기
 
 ### 서버에서 데이터 계속 가져오기

Summary/ms/.DS_Store

@@ -1,9 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
+import { IUser } from "./IUser";
+import { getDataPromise } from "./getDataPromise";
 
 const App: React.FC = () => {
- const user = { name: "Jack", age: 32 };
+ const [users, setUsers] = useState<IUser[]>([]);
+ getDataPromise((receivedUsers: IUser[]) =>
+ setUsers([...users, ...receivedUsers])
+ )(0, 1);
 
- return <div className="App">{JSON.stringify(user)}</div>;
+ return <div className="App">{JSON.stringify(users)}</div>;
 };
 
 export default App;

Summary/ms/Chapter_12/.DS_Store

@@ -0,0 +1,8 @@
+export interface IUser {
+ _id: string;
+ name: string;
+ email: string;
+ sentence: string;
+ profession: string;
+ birthday: Date;
+}

Summary/ms/Chapter_12/12.md

@@ -0,0 +1,11 @@
+import { IUser } from "./IUser";
+
+type GetDataPromiseCallback = (a: IUser[]) => void;
+
+export const getDataPromise = (fn: GetDataPromiseCallback) => (
+ skip: number,
+ limit: number
+) =>
+ fetch(`http://localhost:4000/users/${skip}/${limit}`)
+ .then((res) => res.json())
+ .then(fn);