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

1. JSON-Server 사용하기

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

// db.json

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

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

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

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

// 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. 선택된 메모의 내용을 보여주기

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

// 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);
}