Day 13 - API

프로그래머스_데브코스

목록 보기

11/12

이 글은 2026년 03월 19일 작성된 글입니다.

오늘은 React Todo 프로젝트를 다시 복습하면서 컴포넌트 구조를 정리했고,
외부 API와 연동하여 데이터를 처리하는 방법을 학습했다. 또한 useEffect의
동작 방식을 정리하고, Todo 데이터를 CRUD 방식으로 처리하는 흐름을 학습했다.

1. TodoForm 컴포넌트 분리

기존에는 App.jsx 내부에서 Todo 입력과 관련된 로직을 처리하고 있었는데,
이를 별도의 컴포넌트로 분리했다.

기존에는 form submit을 직접 처리하는 handleOnSubmit을 props로
전달했다.

<TodoForm handleOnSubmit={handleOnSubmit} />

이 방식을 조금 더 단순하게 만들기 위해 addTodo 함수를 정의하고 props
이름도 명확하게 변경했다.

<TodoForm addTodo={addTodo} />

이렇게 하면 컴포넌트의 역할이 더 명확해지고, App은 상태 관리에
집중하고 TodoForm은 입력 UI에 집중할 수 있게 된다.

2. Fetch API로 더미 데이터 연결

Todo 데이터를 테스트하기 위해 더미 API를 사용했다.

useEffect(() => {
    fetch('https://dummyjson.com/todos')
        .then((res) => res.json())
        .then((res) => setTodos(res.todos))
}, [])

흐름은 다음과 같다.

서버에 Todo 데이터를 요청한다.
응답을 JSON으로 변환한다.
todos 상태에 데이터를 저장한다.

이 코드는 컴포넌트가 처음 렌더링될 때 한 번만 실행된다.

3. useEffect deps 정리

deps는 언제 다시 실행할지를 정하는 조건이다.

타입	코드	실행 시점	특징
없음	`useEffect(fn)`	매 렌더링	거의 사용 ❌
빈 배열	`useEffect(fn, [])`	최초 1번	mount 시 사용
단일 deps	`useEffect(fn, [a])`	a 변경 시	기본 패턴
복수 deps	`useEffect(fn, [a, b])`	하나라도 변경	조건 여러 개

React에서 데이터를 처음 불러오는 API 요청은 대부분 [] 형태로
사용한다.

4. Todo API 연동 (CRUD)

Todo 기능을 API와 연결했다.

사용한 API

https://dummyjson.com/todos

각 기능별 HTTP Method는 다음과 같다.

기능 Method URL

조회 GET /todos
생성 POST /todos/add
삭제 DELETE /todos/:id
수정 PUT /todos/:id

Todo 생성 (POST)

fetch('https://dummyjson.com/todos/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        todo: text,
        completed: false,
        userId: randomInt(1, 255),
    }),
})

새로운 Todo 데이터를 서버에 전달한다.

Todo 삭제 (DELETE)

fetch(`https://dummyjson.com/todos/${selectedId}`, {
    method: 'DELETE',
})

선택된 Todo id를 기준으로 데이터를 삭제한다.

Todo 수정 (PUT)

fetch(`https://dummyjson.com/todos/${selectedId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        completed: !target.completed,
    }),
})

완료 상태를 토글(toggle)하는 방식으로 업데이트했다.

5. 목록 갱신을 위한 fetchTodos

데이터를 다시 불러오기 위해 별도의 fetchTodos 함수를 만들었다.

const fetchTodos = () => {
        fetch('https://dummyjson.com/todos')
            .then((res) => res.json())
            .then((res) => setTodos(res.todos))
    }

이렇게 하면

Todo 추가
Todo 삭제
Todo 수정

이후 목록을 다시 가져와 최신 상태를 유지할 수 있다.

6. React Router Dom 설치

추가로 라우팅 기능을 위해 React Router Dom을 설치했다.

설치

npm install react-router-dom

이를 통해 여러 페이지에서 데이터를 처리하거나 화면을 분리할 수 있게
된다.

7. 👥 1차 팀미션 진행

내일까지 React 기반의 Todoapp 을 강사님 레포에 PR 후
팀원들과 서로 리뷰를 하는 것이 과제였다.
오늘 오전에 PR을 하였는데, 팀원들이 좋은 리뷰를 달아줬고,
내가 Context API를 사용하여 전역 상태 관리를 하려고 하였으나,
일부 컴포넌트에선 props 를 사용하고 있었다.
팀원분들이 남겨주신 좋은 피드백을 보며 개선했고, 팀원분들의 코드를 보면서도
각기 배울 점들이 많은 것 같다.