React / Todo-List 만들기 (2)

1탄 : https://hydeveloper.tistory.com/191

 

---

 

이번에는 useState, useEffect, useRef와 json.server를 활용해 CRUD 기능을 가진 todoList를 만들어야하는데

일단 해당 과제는 깃허브에 업로드해놨다.. https://github.com/idubusomuch/Todo-app-json

 

최소 요구 사항

1. Todo 생성 / 조회 / 수정 / 삭제 (CRUD) 기능을 구현하세요.
2. 현재 시간 표시, 타이머, 스톱워치 중 하나 이상의 기능을 구현하세요.
3. 랜덤 명언을 표시할 수 있는 컴포넌트를 만드세요.
4. useState, useEffect, useRef를 각각 한 번 이상 사용하세요.
5. 자유롭게 적용해보고 싶은 CSS를 작성해보세요.

심화 요구 사항

1. json-server를 사용해 Todo 정보를 파일로 저장해 보세요.
2. Custom Hook을 만들고 사용해 보세요.

 

---

 

 

App.jsx

import { useEffect, useState, useRef } from 'react';
import './App.css';

function App() {
  const [isLoading, data] = useFetch('http://localhost:3000/todo');
  const [todo, setTodo] = useState([]);

  useEffect(() => {
    if (data) setTodo(data);
  }, [isLoading]);

  return (
    <>
      <div className="top-bar">
        <Clock />
        <Advice />
      </div>
      {/* <StopWatch />
      <Timer /> */}
      <TodoInput setTodo={setTodo} />
      <TodoList todo={todo} setTodo={setTodo} />
    </>
  );
}

// 커스텀 훅
const useFetch = (url) => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((res) => {
        setData(res);
        setIsLoading(false);
      })
      .catch((err) => {
        setError(err);
        console.log('fetch error : ', err);
        setIsLoading(false);
      });
  }, [url]);
  return [isLoading, data, error];
};

// 랜덤 명언 표시
// https://github.com/gwongibeom/korean-advice-open-api
const Advice = () => {
  const [isLoading, data] = useFetch(
    'https://korean-advice-open-api.vercel.app/api/advice',
  );
  return (
    <div className="advice">
      {!isLoading && (
        <>
          <div>{data.message}</div>
          <div>-{data.author}-</div>
        </>
      )}
    </div>
  );
};

// 현재 시간 표시
const Clock = () => {
  const [time, setTime] = useState(new Date());
  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000);
  }, []);

  return <div className="time-now">{time.toLocaleTimeString()}</div>;
};

// 시간 포맷 함수
const formatTime = (seconds) => {
  const hour = String(Math.floor(seconds / 3600)).padStart(2, '0');
  const minute = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
  const second = String(seconds % 60).padStart(2, '0');
  const timeString = `${hour}:${minute}:${second}`;
  return timeString;
};

// 스탑워치
const StopWatch = () => {
  const [time, setTime] = useState(0);
  const [isOn, setIsOn] = useState(false);
  const timeRef = useRef(null);

  useEffect(() => {
    if (isOn === true) {
      const timeId = setInterval(() => {
        setTime((prev) => prev + 1);
      }, 1000);
      timeRef.current = timeId;
    } else {
      clearInterval(timeRef.current);
    }
  }, [isOn]);

  return (
    <div>
      {formatTime(time)}
      <button onClick={() => setIsOn((prev) => !prev)}>
        {isOn ? '끄기' : '켜기'}
      </button>
      <button
        onClick={() => {
          setTime(0);
          setIsOn(false);
        }}>
        리셋
      </button>
    </div>
  );
};

// 타이머
const Timer = () => {
  // 시작 시간
  const [startTime, setStartTime] = useState(0);
  // 타이머 실행 여부
  const [isOn, setIsOn] = useState(false);
  // 현재 시간
  const [time, setTime] = useState(0);
  // 타이머 아이디를 저장하는 useRef
  const timeRef = useRef(null);

  useEffect(() => {
    if (isOn && time > 0) {
      const timeId = setInterval(() => {
        setTime((prev) => prev - 1);
      }, 1000);
      timeRef.current = timeId;
    } else if (!isOn || time == 0) {
      clearInterval(timeRef.current);
    }
    // 클린업 함수
    return () => clearInterval(timeRef.current);
  }, [isOn, time]);
  return (
    <div>
      <div>
        {time ? formatTime(time) : formatTime(startTime)}
        <button
          onClick={() => {
            setIsOn(true);
            setTime(time ? time : startTime);
            setStartTime(0);
          }}>
          시작
        </button>
        <button onClick={() => setIsOn(false)}>멈춤</button>
        <button
          onClick={() => {
            setTime(0);
            setIsOn(false);
          }}>
          리셋
        </button>
      </div>
      <input
        type="range"
        value={startTime}
        min="0"
        max="3600"
        step="30"
        onChange={(e) => setStartTime(e.target.value)}
      />
    </div>
  );
};

// CRUD 기능
// CREATE
const TodoInput = ({ setTodo }) => {
  const inputRef = useRef(null);
  const addTodo = () => {
    const newTodo = {
      // json server에서는 요청을 보내면 아이디를 직접 생성해줌
      // id: Number(new Date()),
      content: inputRef.current.value,
      time: 0,
    };
    fetch('http://localhost:3000/todo', {
      method: 'POST',
      body: JSON.stringify(newTodo),
    })
      .then((res) => res.json())
      .then((res) => setTodo((prev) => [...prev, res]));
    inputRef.current.value = '';
  };
  return (
    <div className="todo-input">
      <input ref={inputRef} />
      <button onClick={addTodo}>추가</button>
    </div>
  );
};

// READ
const TodoList = ({ todo, setTodo }) => {
  return (
    <ul className="todo-list">
      {todo.map((el) => (
        <Todo key={el.id} todo={el} setTodo={setTodo} />
      ))}
    </ul>
  );
};

// UPDATE, DELETE
const Todo = ({ todo, setTodo }) => {
  const [isEdit, setIsEdit] = useState(false);
  const [editValue, setEditValue] = useState(todo.content);

  // 수정버튼을 눌렀을 때
  const editHandler = () => {
    setIsEdit(true);
    setEditValue(todo.content);
  };

  // 수정 기능
  const updateTodo = () => {
    if (!editValue.trim()) {
      alert('글자를 입력해주세요.');
      return;
    }

    fetch(`http://localhost:3000/todo/${todo.id}`, {
      // PUT은 리소스의 모든 것을 업데이트
      // PATCH는 리소스의 일부를 업데이트
      method: 'PATCH',
      // json-server에 보낼 부분
      body: JSON.stringify({ content: editValue }),
    })
      .then((res) => res.json())
      .then((res) => {
        setTodo((prev) =>
          prev.map((el) =>
            el.id === res.id ? { ...el, content: res.content } : el,
          ),
        );
        setIsEdit(false);
      });

    // 수정 끝
    setIsEdit(false);
  };

  // 삭제 기능
  const deleteTodo = () => {
    fetch(`http://localhost:3000/todo/${todo.id}`, {
      method: 'DELETE',
    }).then((res) => {
      if (res.ok) {
        setTodo((prev) => prev.filter((el) => el.id !== todo.id));
      }
    });
  };

  return (
    <li>
      {isEdit ? (
        <>
          <input
            value={editValue}
            onChange={(e) => setEditValue(e.target.value)}
          />
          <div className="btn-container">
            <button onClick={updateTodo}>저장</button>
            <button onClick={() => setIsEdit(false)}>취소</button>
          </div>
        </>
      ) : (
        <>
          <div>{todo.content}</div>
          <div className="btn-container">
            <button onClick={editHandler}>수정</button>
            <button onClick={deleteTodo}>삭제</button>
          </div>
        </>
      )}
    </li>
  );
};

export default App;

 

 

일단 구조는 다음과 같다.

---

App : 최상위 컴포넌트

 

* 명언 출력

useFetch (커스텀 훅) : url을 넘기면 fetch 요청을 보내고 로딩 / 데이터 / 에러 상태를 관리해주는 커스텀 훅

Advice : useFetch를 이용해 명언 API를 받아와 랜덤 명언을 출력하는 컴포넌트

 

* 시간 관련

Clock : 실시간 시계를 출력하는 컴포넌트

formatTime 함수 : 스톱워치와 타이머에서 시간 형태를 포맷하기 위해 만든 함수

StopWatch : 스탑워치 기능을 가진 컴포넌트 (이번 과제에서는 화면에 안표시함)

Timer : 0~1시간 범위로 타이머를 설정할 수 있게 하는 컴포넌트 (이번 과제에서는 화면에 안표시함)

 

* todoList 기능

TodoInput : CREATE 기능

TodoList : READ 기능

Todo : UPDATE, DELETE 기능

 

 

 

---

 

 

 

1. useFetch

서버 데이터를 가져오고 로딩/데이터/에러 상태를 관리하는 커스텀 훅

이번엔 그냥 json-server를 이용하기 때문에 error 상태 설정은 패스했고,

async/await 패턴을 사용하면 더 안정적이라는데 아직 잘 몰라서 패스..

 

MDN - fetch() API 사용 : https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

const useFetch = (url) => {
  // 내부 상태 관리
  const [isLoading, setIsLoading] = useState(true); // 요청 진행 상태
  const [data, setData] = useState(null); // 성공 시 받은 json 데이터
  // const [error, setError] = useState(null); // 실패 시 받은 error 객체

  useEffect(() => {
    fetch(url) // HTTP GET 요청 (GET이 기본값임)
      .then((res) => res.json()) // 응답이 오면 JSON으로 파싱 (json->javascript라는 뜻)
      .then((res) => {
        setData(res); // 파싱된 결과 res를 setData로 설정
        setIsLoading(false); // isLoading을 false로 전환
      })
      .catch((err) => { // 네트워크나 파싱 에러 발생시 
        // setError(err); // setError(err)로 에러 저장
        console.log('fetch error : ', err); // 디버그
        setIsLoading(false); // isLoading을 false로 전환(로딩 상태 해제)
      });
  }, [url]); // 의존성 배열 [url], url이 바뀔때마다 새로 API를 호출
  return [isLoading, data;
};

 

 

---

2. todo List CRUD 기능

 

일단 json-server과 연결해야 하므로 커스텀 훅 useFetch로 반환값을 받아온다.

json-server 설치는 https://hydeveloper.tistory.com/196 의 스크롤 중간 생명 주기 함수의 필요성에 있다..

 

 

App 컴포넌트

function App() {
 // 로딩 상태
 // useFetch(url) => [isLoading, data] 형태로 반환됨 
  const [isLoading, data] = useFetch('http://localhost:3000/todo');
  const [todo, setTodo] = useState([]);

// useFetch로 받아온 data가 존재할 경우 setTodo로 todo 값 설정
  useEffect(() => {
    if (data) setTodo(data);
    // isLoading을 의존성 배열로 넣어 로딩이 끝난다면 동기화시킴
  }, [isLoading]);

// todoList에는 setTodo를 props으로 넘겨 자식 컴포넌트에서 상태를 갱신할 수 있게 함
  return (
    <>
      <div className="top-bar">
        <Clock />
        <Advice />
      </div>
      <TodoInput setTodo={setTodo} />
      <TodoList todo={todo} setTodo={setTodo} />
    </>
  );
}

 

 

TodoInput 컴포넌트 - CREATE

위의 useFetch와는 달리 POST 방식을 활용하고 있는데,

GET은 서버로부터 데이터를 요청할 때, POST는 서버에 데이터를 새로 생성하거나 업데이트할 때 사용된다.

이 컴포넌트에서는 새로운 todo 데이터를 생성해 업데이트하므로 method:'POST'로 했다.

 

const TodoInput = ({ setTodo }) => {
  // useRef(null)로 input 요소에 직접 접근
  // inputRef.current.value로 input의 value값의 읽기 및 리셋이 가능
  const inputRef = useRef(null);

  // json.server에 데이터를 추가하는 함수
  const addTodo = () => {
    // 입력받은 값을 담을 newTodo 객체 생성
    const newTodo = {
      content: inputRef.current.value,
      // time: 0, // 이건 강의에서 추가 기능 구현하기 위해 만든거라 없어도 됨
    };

    fetch('http://localhost:3000/todo', { 
      method: 'POST', // POST 요청
      body: JSON.stringify(newTodo), // newTodo 객체에 담긴 값을 json형식으로 변환
    })
      .then(res => res.json()) // json으로 다시 파싱해서
      .then(res => setTodo(prev => [...prev, res])); 
      // 기존 todo 배열 뒤에 응답받아 파싱한 객체 추가
      // .catch로 에러추가 해도 될듯.. 
    inputRef.current.value = ''; // input value값 초기화
  };

  return (
    <div className="todo-input">
      <input ref={inputRef} />
      <button onClick={addTodo}>추가</button>
    </div>
  );
};

 

 

TodoList 컴포넌트 - READ

const TodoList = ({ todo, setTodo }) => {
  // map으로 리스트 렌더링
  // key = el.id로 구분
  // 각 항목마다 Todo 컴포넌트 생성
  // Todo 컴포넌트에서 필요하므로 받아온 props(todo, setTodo)를 다시 보냄
  return (
    <ul className="todo-list">
      {todo.map(el => (
        <Todo key={el.id} todo={el} setTodo={setTodo} />
      ))}
    </ul>
  );
};

 

 

Todo 컴포넌트 - UPDATE, DELETE

여기 컴포넌트는 많이 길어서 기능별로 나눴다.. 

 

1) 상태 관리 

const Todo = ({ todo, setTodo }) => {
  const [isEdit, setIsEdit] = useState(false); // 수정 모드 toggle
  // input에서 content를 수정할 때의 수정값 상태 관리
  const [editValue, setEditValue] = useState(todo.content);

 

2) 수정 프로세스

METHOD를 뭘 써야하나 고민을 했는데

PUT은 리소스의 모든 것을 업데이트, PATCH는 리소스의 일부를 업데이트한다.

나는 리소스의 일부(content)만 업데이트하기 때문에 PATCH를 사용했다.

(PUT을 사용할 경우 업데이트할 때 todo 객체에 있는 모든 값을 다시 넣어줘야 수정이 가능해진다...)

  // 1) 수정 모드 핸들러 (버튼 클릭시 호출)
  const editHandler = () => {
    // 수정 모드 : true => return문에서 편집 UI를 표시
    setIsEdit(true);
    // 수정 모드가 막 시작됐을 때의 editValue를 기존의 content 값으로 초기화
    setEditValue(todo.content);
  };
  
  // 2) 서버에 PATCH → 로컬 상태 업데이트
  const updateTodo = () => {
    // 수정한 값이 공백인지 체크
    if (!editValue.trim()) {
      alert('글자를 입력해주세요.');
      return;
    }

    // url = /todo/${todo.id} (수정된 해당 Todo 컴포넌트의 id를 받아옴)
    fetch(`/todo/${todo.id}`, {
      method: 'PATCH', // 수정은 PATCH
      body: JSON.stringify({ content: editValue }), // 수정할 값을 json으로 변환해 넣어줌 
    })
      .then(res => res.json()) // 파싱 후
      .then(res => { 
        setTodo(prev => // 서버 응답 res를 setTodo로 todo에 반영
          prev.map(el => (el.id === res.id ? {  // el.id와 res.id가 같다면
            ...el, content: res.content } // true일 경우 스프레드 연산자로 해당 객체를 복사하고 content로 res.content를 반영
            : el)) // 아니면 그냥 그대로
        );
        setIsEdit(false); // 수정 모드 끝
      });
  };

  // 3) 삭제 요청
  const deleteTodo = () => {
    // method : DELETE로 삭제 요청
    fetch(`/todo/${todo.id}`, { method: 'DELETE' })
      .then(res => {
        if (res.ok) { // 요청이 성공했다면
          // setTodo로 Todo 배열 중 삭제한 아이디와 일치하지 않는 요소들로만 필터링
          setTodo(prev => prev.filter(el => el.id !== todo.id));
        }
      });
  };

 

 

  return (
    <li>
      {isEdit ? (
        // 수정 모드일 때
        <>
          <input
            value={editValue}
            onChange={e => setEditValue(e.target.value)}
          />
          <div className="btn-container">
            <button onClick={updateTodo}>저장</button>
            <button onClick={() => setIsEdit(false)}>취소</button>
          </div>
        </>
      ) : (
        // 아닐 때
        <>
          <div>{todo.content}</div>
          <div className="btn-container">
            <button onClick={editHandler}>수정</button>
            <button onClick={deleteTodo}>삭제</button>
          </div>
        </>
      )}
    </li>
  );
};

 

 

 

---

 

 

3. Advice 컴포넌트

한국어 명언 api를 사용해 명언을 표시했다.

isLoading이 false가 되면 data.message와 data.author이 출력된다. (&&연산자가 저렇게 쓰이는게 아직 낯설다...) 

const Advice = () => {
  const [isLoading, data] = useFetch(
    'https://korean-advice-open-api.vercel.app/api/advice',
  );
  return (
    <div className="advice">
      {!isLoading && (
        <>
          <div>{data.message}</div>
          <div>-{data.author}-</div>
        </>
      )}
    </div>
  );
};

 

 

---

 

 

4. Clock 컴포넌트

const Clock = () => {
  // 시간 상태 관리 (초기값은 현재 Date를 가져옴)
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    setInterval(() => {
      setTime(new Date());
    }, 1000); // 1초에 한번씩 new Date로 time값이 설정됨
  }, []); // 컴포넌트가 마운트될 때 한 번 실행
  // useEffect 자체는 따라서 한번만 실행되지만, 
  // setInterval로 등록된 콜백이 계속 실행되어 time이 매초 갱신돼 렌더링됨

  return <div className="time-now">{time.toLocaleTimeString()}</div>;
};

 

클린업 함수를 써주는 것이 메모리 누수를 방지할 수 있긴 하지만, 이 상태로도 문제없이 잘 작동해서 생략했다...

만약 클린업함수를 써준다면 아래처럼 1초마다 타이머의 id를 받아와 계속 클린업해줄 수 있다.

 

const Clock = () => {
  const [time, setTime] = useState(new Date());

  useEffect(() => {
    const timerId = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // 클린업 함수: 언마운트 시 타이머 해제
    return () => {
      clearInterval(timerId);
    };
  }, []); // 마운트 시 한 번 실행

  return <div className="time-now">{time.toLocaleTimeString()}</div>;
};