📖[React] 마무리 작업

✔️ 느린 인터넷 환경 확인

Crome 개발자 도구에 Network에서 Online->Slow3G

느린 인터넷 환경 TEST 가능
느린 인터넷 환경에서 접속하면, 사용자가 기다리지 못하고 화면을 빠져나갈 수 있으므로 확인해야 함 : 초기값에 맞춰서!

예시

useFetch().js에서...

import { useEffect, useState } from "react";

export default function useFetch(url) {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then(res => {
        return res.json();
      })
      .then(data => {
        setData(data);
      });
  }, [url]);

  return data;
}

const [data, setData] =useState([]); 초기값이 빈 배열
따라서, 초기값이면, 로딩중이라는 화면을 띄워주기

DayList.js

import { Link } from "react-router-dom";
import useFetch from "../hooks/useFetch";

export default function DayList() {
  const days = useFetch("http://localhost:3001/days");

  if(days.length === 0 ){
    return <span>Loading....</span>
  }

  return (
    <ul className="list_day">
      {days.map(day => (
        <li key={day.id}>
          <Link to={`/day/${day.day}`}>Day {day.day}</Link>
        </li>
      ))}
    </ul>
  );
}

Day.js

import { useParams } from "react-router-dom";
import useFetch from "../hooks/useFetch";
import Word from "./Word";

export default function Day() {
  const { day } = useParams();
  const words = useFetch(`http://localhost:3001/words?day=${day}`);

  return (
    <>
      <h2>Day {day}</h2>
      {words.length === 0 && <span>Loading</span>}
      <table>
        <tbody>
          {words.map(word => (
            <Word word={word} key={word.id} />
          ))}
        </tbody>
      </table>
    </>
  );
}

✔️ Data와 통신 중일 때는 버튼 클릭 불가하도록 설정

CreateWord.js

import React, { useState } from "react";
import { useRef } from "react";
import { useHistory } from "react-router-dom";
import useFetch from "../hooks/useFetch";

export default function CreateWord() {
  const days = useFetch("http://localhost:3001/days");
  const history = useHistory();
  const [isLoading, setIsLoading] = useState(false);
  //isLoading이 false 일 때만 onSubmit함수 실행

  function onSubmit(e) {
    e.preventDefault();

    //isLoading 이 false이면 함수 실행
    if (!isLoading) {
      setIsLoading(true); 
      //실행되면 true로 전환
      fetch(`http://localhost:3001/words/`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          day: dayRef.current.value,
          eng: engRef.current.value,
          kor: korRef.current.value,
          isDone: false,
        }),
      }).then((res) => {
        if (res.ok) {
          alert("생성이 완료 되었습니다");
          history.push(`/day/${dayRef.current.value}`);
          setIsLoading(false); //모든 작업이 완료되었으므로
        }
      });
    }
  }
  const engRef = useRef(null);
  const korRef = useRef(null);
  const dayRef = useRef(null);

  return (
    <form onSubmit={onSubmit}>
      <div className="input_area">
        <label>Eng</label>
        <input type="text" placeholder="computer" ref={engRef} />
      </div>
      <div className="input_area">
        <label>Kor</label>
        <input type="text" placeholder="컴퓨터" ref={korRef} />
      </div>
      <div className="input_area">
        <label>Day</label>
        <select ref={dayRef}>
          {days.map((day) => (
            <option key={day.id} value={day.day}>
              {day.day}
            </option>
          ))}
        </select>
      </div>
      style=
      {{
        opacity: isLoading ? 0.2 : 1,
      }}
      <button>{isLoading ? "Saving..." : " 저장"}</button>
	//isLoading이 true(Loading 중) 일때는, 버튼을 Saving으로 바꿔줌
    </form>
  );
}

코딩앙마 React 강의 끝!
이제, 복습!! + 직접 처음부터 다시 만들어보기!!
React에 대한 개념을 다시 한번 훑는 데 정말 도움이 된 것 같다.
짧게만 말하자면 진짜 UX, UI의 구현을 프론트엔드가 제대로 맡고 있구나를 직접적으로 느낄 수 있게 된 강의였고, 너무 재미있었다. 뭔가 앞길이 트인 느낌이라...!
이제 끝나고 할 일...

• 처음부터 다시 구현해보기
• Github에 업로드
• 과제: Day를 잘못 만들었을 때, Day를 삭제 + 각 Day에서 화살표를 이용하여 다른 Day 페이지로 이동하도록
• 자세한 리뷰 작성