리액트 To-do 리스트 만들기 (4탄)

# API 란? 
우리가 만든 로직을 사용하기 위해 인터페이스를 만드는 것이다.  

# JSON 서버 만들기
프론트엔드는 데이터베이스에 직접 접근할 수 없기 때문에 필연적으로 백엔드에서 제공하는 API 를 사용해야 한다. 그런데 지금 하고 있는 프로젝트 처럼 간단한 프로젝트의 경우 별도 API를 만드는 것이 번거롭다. 따라서 json-server 라는 노드 패키지를 사용해 .json 파일에 저장된 데이터를 API를 통해 제공할수 있도록 할 것이다. 

# REST API란?
자원을 URI로 표현하고, 자원에 대한 행위를 HTTP Method(GET, POST, PUT, DELETE)로 표현한다. 
- Create : POST
- Read : GET
- Update : Put 
- Delete : Delete

#  Json-server 
먼저 우리가 사용할 할일 정보를 만들어 보겠다. src폴더 밑에 db 폴더를 만들고, data.json 파일을 하나 생성한다. data.json 에는 할일 정보가 아래 형식으로 들어있다. 

 

{
  "items": [
    {
      "id": 1,
      "task": "숙제하기",
      "due": "20210901",
      "status": "todo"
    },
    {
      "id": 2,
      "task": "자기",
      "due": "20210901",
      "status": "done"
    },
    {
      "id": 3,
      "task": "공부하기",
      "due": "20210901",
      "status": "todo"
    },
    {
      "id": 4,
      "task": "달리기",
      "due": "20210901",
      "status": "done"
    },
    {
      "id": 5,
      "task": "숙제하기",
      "due": "20210901",
      "status": "todo"
    }
  ]
}

다음 터미널에서 npm 의 -g 옵션을 이용해서 json-server 패캐지를 글로벌(전역)패키지로 설치한다. 이러면 json-server 라는 명령어를 사용할수 있게 된다. 

npm install -g json-server

실행시에는 데이터를 읽어올 json 파일의 위치의 경로와 서버에서 사용할 포트 번호를 지정해주면 된다. 

npx json-server --watch ./src/db/data.json --port 3001

# 데이터 조작
이제 json파일을 이용한 백엔드를 아래 경로로 접근해서 읽거나 수정해볼수 있다. 브라우저에서 localhost:3001 뒤에 아래 경로를 붙여서 접속해보자 

/items/1
/items?status=todo

< 프로젝트에 필요한 React 기능들 > 
# map 
map은 array로 구성된 데이터에 대해 각 원소마다 공통적인 특정 작업을 반복하는 기능이다. 예를 들어 아래와 같은 유저 데이터를 가지고 있다고 생각해보자

  const users = [
    {
      id: 1,
      username: "indo",
      email: "indo@react.com",
    },
    {
      id: 2,
      username: "buzzi",
      email: "buzzi@react.com",
    },
    {
      id: 3,
      username: "cameron",
      email: "cameron@react.com",
    },
  ];

그리고 이 유저 데이터를 렌더링할 컴포넌트 User.js 를 아래와 같이 만들어보자. 

//User.js 

import React from "react";

export default function User({ user }) {
  return (
    <div>
      <b>{user.username}</b> <span>({user.email})</span>{" "}
    </div>
  );
}

그리고 이 User 컴포넌트를 사용할 Users.js를 만든다. 

//Users.js

import React from "react";
import User from "./User.js";

export default function UserList() {
  const users = [
    {
      id: 1,
      username: "indo",
      email: "indo@react.com",
    },
    {
      id: 2,
      username: "buzzi",
      email: "buzzi@react.com",
    },
    {
      id: 3,
      username: "cameron",
      email: "cameron@react.com",
    },
  ];
  return (
    <div>
      <User user={users[0]} /> <User user={users[1]} /> <User user={users[2]} />
    </div>
  );
}

화면의 세사람의 정보가 잘 렌더링 된다. 그런데 만일 우리가 렌더링 해야할 유저데이터가 3개가 아니라 3만개라면 어떨까? users배열의 인덱스를 0부터 29999까지 적어서 User컴포넌트를 렌더링할 수 있겠지만, 쉬운 일은 아니다. 

자바스크립트에서는 이와 같은 배열 형태의 데이터를 쉽게 반복할수 있는 map 이라는 함수가 있다. 위 예제를 map 을 사용해 다음과 같이 수정할수 있다. 

//Users.js

import React from "react";
import User from "./User.js";
export default function UserList() {
  const users = [
    {
      id: 1,
      username: "indo",
      email: "indo@react.com",
    },
    {
      id: 2,
      username: "buzzi",
      email: "buzzi@react.com",
    },
    {
      id: 3,
      username: "cameron",
      email: "cameron@react.com",
    },
    {
        id: 4,
        username: "hackman",
        email: "hackman@react.com",
      },
  ];
  return (
    <div>
      {users.map((user) => (
        <User user={user} />
      ))}{" "}
    </div>
  );
}

map 을 사용하면 동적으로 데이터 갯수가 바뀌는 경우에도 문제없이 데이터를 렌더링 하는 것이 가능하다. 

# 선택적 렌더링 
자바스크립트 문법을 사용해 특정 조건에 따라 렌더링 결과를 다르게 할 수 있다. 아래 예제와 같이 입력한다. 

//App.js

import UserList from "./components/UserList.js";
export default function App() {
  const users = [
    {
      id: 1,
      username: "indo",
      email: "indo@react.com", 
      active: "active"
    },
    {
      id: 2,
      username: "buzzi", 
      email: "buzzi@react.com", 
      active: "inactive"
    },
    {
      id: 3,
      username: "cameron", 
      email: "cameron@react.com", 
      active: "active"
    }
  ]; 
  return (
    <div>
      <UserList users={users} /> 
    </div>
  );
}

//UserList.js

import React, { useEffect } from "react";
import "./User.css";

function User({ user }) {
  useEffect(() => {
    console.log("컴포넌트가 화면에 나타남");
    return () => {
      console.log("컴포넌트가 화면에서 사라짐");
    };
  }, []);
  return (
    <div>
      <b id={user.active}>{user.username}</b> &nbsp;
      <span>({user.email})</span>{" "}
    </div>
  );
}
function UserList({ users }) {
  return (
    <div>
      {users.map((user) => (
        <User user={user} key={user.id} />
      ))}
    </div>
  );
}
export default UserList;

/* User.css */
#active {
  color: green;
}
#inactive {
  color: red;
}

user 정보의 active 프로퍼티에 따라 유저 이름의 색이 초록색 또는 빨간색으로 렌더링 되는 것을 확인할 수 있다. 이런 식으로 특정 엘리먼트의 id를 바꾸게 되면 CSS에서 적용되는 내용이 달라지게 된다. 이를 응용한 것이 웹페이지의 다크 모드이다. 

 

# react-router-dom 
리액트에는 특정 URL 경로로 이동 시, 특정 컴포넌트를 불러올 수 있도록 하는 router 기능을 react-router-dom 패캐지를 통해 구현할 수 있다. 주로 쓰이는 컴포넌트들은 아래와 같다. 

import {BrowserRouter, Route, Switch} from 'react-router-dom';

BrowserRouter는 url 경로를 이용해 특정 컴포넌트로 이동하도록 하는 컴포넌트이다. 따라서 일반적으로는 App.js 에 들어간다. 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";

function App() {
  return <h1>Hello React Router</h1>;
}
ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

Switch 컴포넌트는 자신의 하위의 Route 컴포넌트를 찾아 현재의 URL 경로와 일치하는 것이 있는지를 찾는다. 
만일 현재 URL 주소가 루트 주소(서버 주소)라면 Items 컴포넌트가 all status 로 렌더링 되고, /todo 경로로 접근했다면 
todo status 로 렌더링 되게 된다. 

<div className="App">
  <Header />
  <Switch>
    <Route exact path="/">
      <Items status="all" />
    </Route>
    <Route path="/todo">
      <Items status="todo" />
    </Route>
  </Switch>
</div>;