# (2) 만들면서 알아보는 Hooks

### 1. JSON-Server 사용하기

[JSON-Server](https://github.com/typicode/json-server) 를 이용하여 실제 서버와 데이터 통신을 하는 것 처럼 구성해보겠습니다.\
프로젝트 폴더 아래에 db.json 이라는 json 파일을 만들어주세요

```
// db.json

{
  "memos": [
    { "id": 1, "title": "임시 메모 데이터", "content": "임시 메모 데이터의 내용" }
  ]
}
```

```
$ npx json-server --watch db.json --port 8000
```

![](https://707901708-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LmntoQaR_UpEAiZTdQt%2F-LwgBTe7HeNWYJk0EdJS%2F-LwgFYCWI_gU9VhlRb-0%2Fimage.png?alt=media\&token=a839e969-d9e0-4b13-8ba0-f1581ba09885)

### 2. JSON-Server (:GET) 을 이용하여 데이터 가져오기

JSON-Server 는 HTTP method (GET, POST, PUT, DELETE) 등을 지원합니다.\
페이지에 처음 진입했을때 db의 memos 값을 가져와 Application Context 의 memos 의 기본값을 세팅합니다.

```javascript
// src/application-context.js

import React, { createContext, useContext, useEffect, useState } from "react";

const Context = createContext(null);

export function ApplicationContextProvider({ children }) {
  useEffect(() => {
    async function getMemos() {
      const response = await fetch('http://localhost:8000/memos')
      setMemos(response.ok ? await response.json() : [])
    }
    getMemos()
  }, [])

  const [memos, setMemos] = useState([]);
  
  // ...
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

export function useApplicationContext() {
  return useContext(Context);
}
```

> useEffect 의 dependency 가 \[ ] 면 최초 한 번만 동작합니다.

첫 진입시 memos 를 fetch 하여 데이터를 가져 온 후 Application Context 의 memos 를 set 합니다.

### 3. 선택된 메모의 내용을 보여주기

지금은 임시로 선택된 메모의 값을 보여주고 있습니다. 선택된 메모의 값을 제거합니다.

```javascript
// src/application-context.js

import React, { createContext, useContext, useEffect, useState } from "react";

const Context = createContext(null);

export function ApplicationContextProvider({ children }) {
  // ...
  const [memo, setMemo] = useState(null); // 선택된 memo 의 값을 null 로 변경합니다.

  const value = {
    memos,
    setMemos,
    memo,
    setMemo
  };
  return <Context.Provider value={value}>{children}</Context.Provider>;
}

export function useApplicationContext() {
  return useContext(Context);
}
```