> For the complete documentation index, see [llms.txt](https://simplereact.gitbook.io/simplereact/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://simplereact.gitbook.io/simplereact/2-hooks.md).

# (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
```

![](/files/-LwgFYCWI_gU9VhlRb-0)

### 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);
}
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://simplereact.gitbook.io/simplereact/2-hooks.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.