⚛️Start! React : section11 - json-server,REST API&botton

이번 시간에는 버튼들을 조작하고 json-server를 활용해서 데이터를 조작하는 방법을 배워 볼 것이다. 우선 버튼 구현을 먼저 해보려고 한다. 들어가기 앞서서 우리가 만들어 놓은 버튼들을 상위, 하위 컴포넌트로 나누어야 한다. props와 useState를 사용하기 위해서다. 아래 코드는 변경된 Day.js파일 모습이며 다로 하위 컴포넌트를 생성한 Word.js파일을 함께 보자.

* Day.js

import dummy from "../db/data.json";

import { useParams } from "react-router-dom";

import Word from "./Word";

export default function Day() {

  // const { day } = useParams();

  const day = useParams().day;

  const wordList = dummy.words.filter(word => word.day === Number(day)); //1일차 dummy data를 가지고 온다.

  return <>

    <h2>Day {day}</h2>

    <table>

      <tbody>

        {wordList.map(word => {

          return (

            <Word word={word} key={word.id}></Word> /** Word.js에서 key값을 지우기 때문에*/

          )

        })}

      </tbody>

    </table>

  </>;

}

기존에 있던 table태그들을 Word.js로 빼놓은 상태이다. 해당 컴포넌트는 반복적인 수행 작업을 하기 때문에 key값을 Word컴포넌트에 key값을 부여 해야한다.

* Word.js

 

import { useState } from "react";

export default function Word(props) {

  //state를 사용해서 각버튼과 상태를 표현하기 위해서 단어 부분을 따로 컴포넌트로 때어낸다.

  const [isShow, setIsShow] = useState(false);

  const [isDone, setIsDone] = useState(props.word.isDone);

  //버튼이 클릭 되었을 때 구현

  function toggleShow() {

    setIsShow(!isShow);

  }

  function toggleDone() {

    setIsDone(!isDone);

  }

  /* key={props.word.id} 여기서 key를 지운다. */

  return (

    <tr className={isDone ? 'off' : ''}>

      <td>

        <input type="checkbox" checked={isDone} onChange={toggleDone}></input>

      </td>

      <td>{props.word.eng}</td>

      <td>{isShow && props.word.kor}</td>

      {/* isShow를 같이 두면서 true 여야지 보일 수 있다. ->짧은 서킷 평가(short-circuit evaluation) */}

      <td>

        <button onClick={toggleShow}>뜻 {isShow ? '숨기기' : '보기'}</button>

        <button className="btn_del">삭제</button>

      </td>

    </tr>

  )

}

우리는 useState를 사용해 채크박스와 버튼을 구현했다. 우선 toggleShow같은 경우 클릭이 되면 뜻을 보이고 숨길 수 있는 상태관리이다. 이를 오로지 toggleShow함수와 onClick만 생성하면 되는 것이 아니라 이 기능이 적용될 '뜻'이 보이는 한글 영역에 state를 적용해야한다. isShow&&props.word.kor의 형태는 숏서킷 평가 방법이다. isShow가 true일때만 해당 부분이 보이고 안보이고를 결정 짓게 만든 문법이다. toggleDone같은 경우 체크박스를 컨트롤하는 state다. 그래서 해당 태그에 checked는 체크되는 것을 표기하는 부분이고 onChange는 지속적으로 체크되는 것을 동적으로 보여 줄 수 있게 해주는 부분이다. tr태그에서 className={isDone ? 'off' : ''}부분은 isDone이 true일때 index.css의 off를 적용하고 그렇지 않으면 적용하지 않는 것을 의미한다.

이제 json-server를 사용하는 방법을 살펴보자. 먼저 아래 json-server github페이지이다.

GitHub - typicode/json-server: Get a full fake REST API with zero coding in less than 30 seconds (seriously)

방법을 살펴보기 앞서 nodejs를 업그레이드 다운그레이드 하는 방법이 바겼다. 그래서 우리는 이를 손쉽게 할 수 있는 도구를 사용할 것이다. 그것은 바로 NVM아다.

Releases · coreybutler/nvm-windows

json-server를 먼저 설치하는 방법은 아래와 같다.

 

npm install -g json-server

 

 

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

 

하지만 설치하면서 문제가 발생하기도 한다. 특히 downgrade나 upgrade를 원하는데 예전에는 홈페이지에가서 필요한 버전을 다운받아 새롭게 적용하고 react의 일부를 다시 설치하는 방법을 하면 되었다. 하지만 이런 번거로움을 없애기 위해서 NVM이라는 유틸리티를 통해서 cmd로 손쉽게 버전을 관리할 수 있게 된것이다. 사용 방법은 어렵지 않으니 한번 사용해보시라.

json-server란

다음 시간에는 REST API를 이용할 것이다. REST API는 url주소로 CRUD를 수행하는 것이다. 이제 json-server를 사용해서 data API를 직접 생성하지 않고 json 파일을 손쉽게 다룰 수 있다.