[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_30일차

Recording/멋쟁이사자처럼 BE 13기

[멋쟁이사자처럼 부트캠프 TIL 회고] BE 13기_30일차_"리액트 Todo"

LEFT 2025. 1. 14. 18:44

🦁멋쟁이사자처럼 백엔드 부트캠프 13기 🦁
TIL 회고 - [30]일차

🚀30일차에는 리액트로 Todo리스트를 구현하면서 추가, 삭제, 수정 기능을 어떻게 구현하면 좋을지 배울 수 있었다.

useState가 중요하게 자주 쓰였고 props로 함수객체와 데이터객체를 전달하여

다른 컴포넌트에서 수행한 값을 전달할 수 있었다. 회고를 통해 코드를 다시 해석해봐야겠다고 생각했다.

Todo 리스트 만들기

전체 컴포넌트를 감싸는 컴포넌트 = TodoBox 컴포넌트
그 안에서 Input을 받는 Todo = TodoInput 컴포넌트
Todo들을 보여주는 컴포넌트 = TodoList 컴포넌트

추가 기능

할 일 입력 후 엔터 입력 시 “할일이 등록되면서” 리스트에 정보 출력 (input태그에 이벤트onKeyDown 활용)
리스트의 항목들을 배열로 관리
리스트가 "상태관리"되어야함

const [toDoList, setTodoList] = useState([
    { id: 1, title: "리액트 공부하기" },
    { id: 2, title: "스프링 공부하기" },
    { id: 3, title: "블로그 회고작성" },
  ]);

데이터를 가진 배열은 TodoList와 TodoInput컴포넌트 둘다 접근이 가능한 TodoBox 컴포넌트가 관리해야함
이 데이터 배열을 props를 통해 객체로써 각각의 컴포넌트에 보내줄 수 있을 것이다.

const TodoList = ({ todoList }) => {
  return (
    <ul>
      {todoList.map((toDo) => (
        <li key={toDo.id}>{toDo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

const TodoList = ( { todoList })
➡️ TodoBox 컴포넌트로부터 "데이터 배열"을 전달받아서 사용
return <ul> ... </ul>
➡️<ul>태그 밑에 { } 자바스크립트 코드로 감싼 map()함수를 사용하여 <li>태그를 만든다.
<li key={todDo.id}>
➡️map 사용 시 "기본키 값이 필요"하므로 id값을 키 값으로 설정한다.

// TodoBox컴포넌트
const addTodoList = (title) => {
    console.log(title);
  };

  return (
    <div>
      <TodoInput addTodo={addTodoList} />
      <TodoList todoList={todoList} />
    </div>
  );

TodoInput 컴포넌트에서 사용자에게 값을 입력받은 후 수정하는 로직은
TodoBox컴포넌트에서 관리해야할 것이 맞을 것이다.
TodoBox컴포넌트에서 TodoInput컴포넌트로 props를 넘길때
"addTodo" 라는 “키”를 넘겨야한다. ⚠️"addTodoList"라는 “value”를 넘기면 안된다.

// TodoInput 컴포넌트
const TodoInput = ({ addTodo }) => {
  const [toDo, setToDo] = useState("");

  const keyDownHandler = (e) => {
    if (e.key === "Enter") {
      // Enter가 입력되면 리스트에 값을 저장
      if (e.target.value === "") return;
      addTodo(e.target.value); // 실제 리스트에 저장하는 부분은 TodoBox컴포넌트가 관리
      setToDo("");
    }
  };
  //...

TodoBox컴포넌트로부터 addTodo “키”를 props로 전달받아서 keyDownHandler() 에서 사용
addTodo(e.target.value)
➡️TodoBox컴포넌트에 e.target.value 를 "인자"넘기게된다.
➡️즉 TodoInput 컴포넌트에서 keyDownHandler 이벤트 수행을 통해
TodoBox컴포넌트의 함수인 addTodo()에게 (e.target.value)인자를 전달하게 되는 것이다.
setToDo("")
➡️값이 전달되면 “” 로 초기화시킨다. (useState의 set함수)
TodoInput 컴포넌트에서 사용자에게 값을 입력받을때 title값만 입력을 받지만
TodoBox컴포넌트에서 "데이터 배열"을 관리하기 위해서는 배열에 있는 속성인 id값도 필요할 것이다.
그러기 위해서는 id값을 1씩 증가하면서 값을 넣기위해 useRef를 사용할 수 있다.
(내부적으로 값이 계속 변할 수 있는 기능제공 ↔ ⚠️let 사용 X (리렌더링 시 값이 초기화됨)
➡️useRef로 관리하는 변수는 "값이 바뀌어도 컴포넌트가 리렌더링되지 않는 특징"을 활용

Todo리스트 - 할 일 "추가" 구현

▶️실습 - TodoBox 컴포넌트 : useRef()를 활용한 id값 추가

const id = useRef(Math.max(...todoList.map((todo) => todo.id)) + 1);

const addTodoList = (title) => {
  console.log("새로 추가한 값 : id[" + id + "], title[" + title + "]");
  const newTodo = {
    id: id.current,
    title: title,
  };
  setTodoList([...todoList, newTodo]);
  id.current += 1;
};

const newTodo = { id: id.current, title:title };
➡️새로운 값을 넣기위한 배열을 만든다.
➡️id(key), 값(value)의 구조로된 배열로 기존 배열과 동일한 구조를 가진다.
id.current 의미
➡️useRef의 현재 값을 가져온다. (현재 id값)
➡️useRef의 구조는 { current:0 } 처럼 "객체"로 만들어져있다.
id.current대신 id를 참조하면 { current : 0 } 처럼 객체 자체가 리턴되므로
id.current를 참조해주어야 id 객체의 current를 직접 참조하여 그 값을 가져올 수 있게되는 것

⚠️useRef사용시에는 current를 사용해야 useRef의 값을 사용 가능
setTodoList([…todoList, newTodo]);
➡️useState의 set함수(setTodoList)를 사용하여 (기존 배열의 값들 + 새로운 배열)로 TodoList 배열을 업데이트
➡️(… 스프레드 연산자)를 사용하여 기존배열(todoList)의 값 요소만 가져와야한다.

👀 위 코드 대신 사용할 수 있는 코드로
setTodoList(toDoList.concat(newTodo));
➡️concat()를 활용해 기존 배열 toDoList에 concat을 통해서 newTodo라는 새로운 배열을 이어 붙여줄 수 있다.

Math.max(...todoList.map((todo) => todo.id))

"데이터 배열"의 id값이 반드시 (1, 2, 3, 4) 이지 않을 수 있고, 특정 id값(ex.3번)이 삭제된 상태일 수도 있다.
id는 primary key이므로 중간 id값이 비어있어도 오류로 발생되진 않아 문제를 찾기 힘들 수 있다.
map()을 활용하여 현재 "데이터 배열"의 최대 id값을 구해야한다.
Math.max()
➡️만약 todoList.map()을 사용하게되면 배열 자체를 가져오게되므로
max()함수가 객체에 대한 최대값을 반환하지 못한다.

➡️해결방법 : …배열(스프레드 문법)을 활용한다 (ex. 1, 2, 3, 4 중 최대값을 추출해낼 수 있다. ( "4" ))

▶️실습 - TodoInput 컴포넌트 : keyDownHandler() 수정

// TodoInput 컴포넌트 - keyDownHandler()에 추가
e.target.value("");
e.target.focus();

e.target.value(""); ➡️할 일을 입력(Enter) 한 후 input 박스에 입력했던 값이 비워지도록 구현
e.target.focus(); ➡️비워진 후에는 focus()를 통해 비워진 input박스에 커서가 위치할 수 있도록 구현

Todo리스트 - 할 일 "수정/삭제" 구현

수정, 삭제는 “데이터 배열"(=리스트)가 수정, 삭제 되어야하므로
"데이터 배열"(=리스트)가 담긴 TodoBox컴포넌트에서 수행

▶️실습 - TodoBox컴포넌트 : deleteTodoList() = 삭제 기능

// TodoBox 컴포넌트 

// 2. 할 일 삭제 (추가)
const deleteTodoList = (id) => {
	setTodoList(todoList.filter((todo) => todo.id !== id));
}

const deleteTodoList = (id) => { }
➡️id값을 가져와서 그 id에 해당하는 할 일을 삭제할 수 있도록 구현
todoList.filter()
⭐filter()함수를 활용
➡️조건을 만족하는 것만 뽑아내어 새로운 배열을 리턴해줌 (map()과의 차이점은 조건을 검사하는지 안하는지)
todo.id !== id
➡️filter()함수의 조건식을 의미
현재 TodoBox컴포넌트에서 useRef로 관리되고 있는 todo.id와 deleteTodoList 함수에서 전달받은 id를 비교
➡️filter()를 통해 id값이 일치하지 않는 것만 새로운 배열로 만들어냄
(즉 삭제할 할 일의 id값을 제외하고 새로운 배열로 만들어냄)

➡️삭제할 할 일을 제외하고 새 배열로 만들어지므로 “삭제하는 듯한 기능이 구현됨”

▶️실습 - TodoBox컴포넌트 : updateTodoList() = 수정 (리렌더링 X)

// TodoBox 컴포넌트

// 3. 할 일 수정 (리렌더링 X)
const updateTodoList = (todo) => {
	todoList.map((item) => {
    if (item.id === todo.id) {
      item.title = todo.title;
    }
  });
}

할 일 수정 후 리렌더링이 필요하지 않을때의 코드
"수정"의 기능을 하는 컴포넌트로부터 todo라는 객체를 받아와서 id와 title을 모두 관리할 수 있도록 함
💡todo 객체 { id: undefined, title : undefined}
map( (item) => { ... })
➡️TodoList에서 요소들을 모두 꺼내서 진행해야하므로 map() 사용
item ➡️임의로 이름을 설정한 todo 객체
item.id === todo.id
➡️item.id은 현재 TodoBox컴포넌트에서 관리되고 있는 리스트의 id를 가리킨다.
➡️todo.id는 updateTodoList 함수에서 전달받은 todo객체의 id를 가리킨다.

따라서 이 둘이 같으면 현재 TodoBox컴포넌트의 리스트의 title을
새롭게 받아온 todo객체의 title로 바꿔주는 코드를 의미

▶️실습 - TodoBox컴포넌트 : updateTodoList() = 수정 (리렌더링 O)

// TodoBox 컴포넌트

// 3. 할 일 수정 (리렌더링 O)
const updateTodoList = (todo) => {
	const updating = todoList.map((item) => {
		item.id === todo.id ? {...item, title:todo.title} : item;
	});
	setTodoList(updating);
}

할 일 수정 후 리렌더링이 필요할때의 코드
item.id === todo.id ? {...item, title:todo.title} : item;
➡️삼항연산자를 활용해 item.id === todo.id 가 일치한다면 {...item, title:todo.title} 수행
{…item, title:todo.title}
➡️조건식 (item.id === todo.id)가 true일때 실행하는 문장이다.
...item는 기존 배열의 요소들을 updating에 저장하고
title:todo.title에서 title은 todo.title로 갱신하는 기능을 한다.
item
➡️조건식 (item.id === todo.id)가 false일때 실행하는 문장이다.
수정할 id가 기존 배열에 존재하지 않을때 기존 배열만 그대로 updating에 저장
setTodoList(updating);
➡️useState의 set함수를 이용해 위의 조건으로부터 수정되었던 배열(updating)을 업데이트 시킨다.

▶️실습 - 삭제 기능 적용

TodoBox컴포넌트

// TodoBox컴포넌트
return (
  <div>
    <TodoInput addTodo={addTodoList} />
    <TodoList
      todoList={todoList}
      deleteHandler={deleteTodoList}
      updateHandler={updateTodoList}
    />
  </div>
);

TodoBox 컴포넌트의 <TodoList>컴포넌트가 담긴 부분에서 deleteHandler와 updateHandler에 각각의 함수를 전달
➡️TodoList 컴포넌트에서 deleteHandler와 updateHandler를 props로 전달받아 사용 가능

TodoList컴포넌트

// TodoList컴포넌트
const TodoList = ({ todoList, deleteHandler, updateHandler}) => {
  return (
    <ul>
      {todoList.map((toDo) => (
        <li key={toDo.id}>{toDo.title}</li>
      ))}
    </ul>
  );
};

export default TodoList;

const TodoList = ( { todoList, deleteHandler, updateHandler } ) => { ... }
➡️props로 "데이터 배열"과 deleteHandler, updateHandler를 전달받음
하지만 이렇게되면 TodoList 컴포넌트에서 해야하는 기능이 많아질 수 있으므로 “컴포넌트 분리”를 고려

Todo 컴포넌트로 기능 분리

const Todo = () => {
    return(
        
    );
}

export default Todo;

return은 <div>처럼 묶여있어야 사용할 수 있는데
이 경우 Todo컴포넌트를 다른 컴포넌트에서 사용하게될때 <div>가 묶인 상태로 전달받게되므로
<div>로 한번 더 감싸져 원치않는 결과가 나올 수 있다.
➡️해결방법 : Fragment (<> </>) 사용
return문에서 묶는 기능을 하면서도 태그가 전달되진 않아 원하는 결과를 얻을 수 있다.

▶️실습 - Todo 컴포넌트 : 삭제 버튼 만들기

const Todo = ({todo, deleteHandler}) => {
    return(
        <>
            {todo.title}
            <button onClick={() => deleteHandler(todo.id)}>삭제</button>
        </>
    );
}

export default Todo;

{todo.title}
➡️TodoList컴포넌트로부터 받아온 todo객체으로부터 title을 만들어줌
onClick={ () => deleteHandler(todo.id) }
➡️props로 받아온 deleteHandler함수 안에 todo.id를 넘겨준다. (TodoBox컴포넌트까지 전달됨)

❓onClick = {deleteHandler(todo.id)}
onClick={ () ⇒ deleteHandler(todo.id)} 의 차이점

➡️실행 시점의 차이이다.
- deleteHandler(todo.id)
함수 호출 결과를 `onClick`에 전달하는 방식으로 "컴포넌트가 렌더링되는 시점에 함수가 즉시 실행"된다.
따라서 deleteHandler(todo.id)의 반환값이 onClick에 할당되므로 이벤트와는 상관없이 "렌더링 중에 함수가 실행"

- onClick={() => deleteHandler(todo.id)}
람다 함수를 사용해 deleteHandler(todo.id) 함수를 호출할 수 있다.
onClick이벤트가 발생했을때 "() 람다함수"가 실행되어 deleteHandler(todo.id)를 호출하는 것이기때문에
컴포넌트가 렌더링되는 시점에는 실행되지 않고, onClick 이벤트가 발생할때 deleteHandler()함수가 실행된다.

즉 람다 함수 ( () => )를 사용해야 이벤트가 발생할 때 원하는 함수가 실행된다.

▶️실습 - TodoList 컴포넌트 : 삭제 기능을 Todo컴포넌트에 적용

import Todo from "./Todo";

const TodoList = ({ todoList, deleteHandler, updateHandler}) => {
  return (
    <ul>
      {todoList.map((toDo) => (
        <li key={toDo.id}><Todo todo={toDo} deleteHandler={deleteHandler}/></li>
      ))}
    </ul>
  );
};

export default TodoList;

TodoList 컴포넌트에서는 {toDo.title}부분을 <Todo/>컴포넌트로 대체가능
➡️(Todo컴포넌트에서 <> 버튼 </>을 return하게 되므로)
속성으로는 map()을 통해 관리한 값인 toDo가 담겨있는 todo 속성을 전달
deleteHandler={deleteHandler};
➡️ToboBox컴포넌트로부터 받아온 deleteHandler를 다시 Todo컴포넌트로 넘겨주는 역할을 한다.

삭제 버튼을 클릭하면 deleteHandler가 발생하여
TodoBox컴포넌트의 리스트가 수정되는 것까지 구현

▶️실습 - Todo 컴포넌트 : 수정 버튼 만들기

요청이 2개일 것이다. “수정할 폼(틀)” 요청과 “수정한 값으로 전달”하는 요청을 수행해야한다.
ex. 마치 로그인에서 “로그인 폼(틀)” 요청과 “로그인 요청” 두개 인 것과 유사하다.

위의 그림에서 위에 있는 수정버튼은 “수정해달라”라는 요청이고
밑에 있는 수정버튼은 “수정 폼”을 요청하는 요청이다.

▶️실습 - TodoList 컴포넌트 : 수정 기능을 Todo컴포넌트에 적용

import { useState } from "react";

const Todo = ({ todo, deleteHandler }) => {

  const [updateMode, setUpdateMode] = useState(false); // 기본값은 false

  return (
    <>
      {todo.title}
      <button onClick={() => deleteHandler(todo.id)}>삭제</button>
      <button>수정</button>
    </>
  );
};

export default Todo;

수정폼 요청 부분과과 수정 요청 부분을 추가
const [updateMode, setUpdateMode] = useState(false);
➡️updateMode를 useState로 상태를 관리하여 updateMode가 true바뀌면 수정폼이 보여지게끔 구현

수정버튼이 클릭되면 수정 폼이 요청되어 수정폼을 보여줄 수 있도록 하는 기능을 추가 구현해야한다.
➡️updateMode를 true로 바꿔주어 수정 폼이 보여지는 기능 필요

❓<button onClick={updateModeHanlder}>수정</button> 호출 방식에 대하여

삭제 기능을 구현할때 { () => deleteHandler(todo.id) } 처럼 람다를 활용한 방식과 호출방식이 똑같다.

그 이유는 updateModeHandler에 따로 매개변수를 전달하지 않기 때문에, 별도의 람다함수(() =>)가 필요없는 것이다.

따라서 <button onClick={updateModeHandler}>는 이벤트가 발생할때만 이벤트핸들러가 실행되므로
람다 함수 없이도 적절하게 동작한다.

onChange 속성

리액트에서 <input> 에 value속성을 설정했을때,
onChange 속성을 제공하지 않으면 "읽기 전용"으로 판단되기때문에 onChange속성을 적용해주어야한다.
리액트에서 value 속성이 설정되면 "제어 컴포넌트"로 판단되어 입력 값이 부모 컴포넌트의 상태에 의해 제어된다.
💡따라서 onChange 속성을 추가하여 입력 값을 상태로 관리해야한다.

▶️실습 - TodoList컴포넌트 :
TodoBox컴포넌트에서 받은 updateHandler를 Todo컴포넌트에 다시 전달

import Todo from "./Todo";

const TodoList = ({ todoList, deleteHandler, updateHandler }) => {
  return (
    <ul>
      {todoList.map((toDo) => (
        <li key={toDo.id}>
          <Todo
            todo={toDo}
            deleteHandler={deleteHandler}
            updateHandler={updateHandler}
          />
        </li>
      ))}
    </ul>
  );
};

export default TodoList;

<Todo todo={toDo} deleteHandler={deleteHandler} updateHandler={updateHandler}
➡️TodoBox컴포넌트로부터 받아온 updateHandler를 Todo컴포넌트로 다시 전달

Todo컴포넌트

import { useState } from "react";

const Todo = ({ todo, deleteHandler, updateHandler }) => {
  //...

  const [title, setTitle] = useState(todo.title);

  const updateModeHanlder = () => {
    setUpdateMode(true);
    console.log("updateMode가 " + updateMode + "입니다.");
  };

  // ...

export default Todo;

const [title, setTitle] = useState(todo.title);
➡️초기값이 todo.title인 이유는 Todo컴포넌트가 TodoList컴포넌트로부터 todo 객체를 입력받아왔으므로
받아온 todo객체의 title을 수정하겠다고 명시해주어야하므로 todo객체의 title을 초기값으로 설정

▶️실습 - Todo컴포넌트 : onChange 적용

const changeHandler = (e) => {
    setTitle(e.target.value);
  };

  if (updateMode) {
    // 수정폼을 활성화시켰을때 (true)
    return (
      <>
        <input type="text" value="수정할 값" onChange={changeHandler} />
        <button>수정</button>
      </>
    );
  }

onChange를 이용하여 (e)이벤트가 발생했을때 수행할 changeHandler 이벤트를 요청
onChange의 코드를 onChange={(e) => setTitle(e.target.value)} 로 바꿔줄 수도 있다.
setTitle(e.target.value)
➡️changeHandler 함수에서 이벤트가 발생한 객체(e.target)의 값(.value)으로 현재 title을 바꿔주는 코드
⚠️setTitle()을 통해 Todo컴포넌트에서만 title이 수정되었기때문에
TodoBox컴포넌트의 "데이터 배열"까지는 수정된 title이 전달되지 않는다.

▶️실습 - Todo컴포넌트

import { useState } from "react";

const Todo = ({ todo, deleteHandler, updateHandler }) => {
  // 수정폼, 수정
  const [updateMode, setUpdateMode] = useState(false); // 기본값은 false
  // updateMode가 true바뀌면 수정폼이 보여지게끔 구현 가능

  const [title, setTitle] = useState(todo.title);

  const updateModeHanlder = () => {
    setUpdateMode(true);
    console.log("updateMode가 " + updateMode + "입니다.");
  };

  const changeHandler = (e) => {
    setTitle(e.target.value);
  };

  const updateValue = () => {
    updateHandler({ id: todo.id, title: title }); 
    setUpdateMode(false); // 다시 false로 바꿔주어 수정 폼을 비활성화 시킴
  };

  if (updateMode) {
    // 수정폼을 활성화시켰을때 (true)
    return (
      <>
        <input type="text" value="수정할 값" onChagne={changeHandler} />
        <button onClick={updateValue}>수정</button>
      </>
    );
  }

  return (
    <>
      {todo.title}
      <button onClick={() => deleteHandler(todo.id)}>삭제</button>
      <button onClick={updateModeHanlder}>수정</button>
    </>
  );
};

export default Todo;

const Todo = ({ todo, deleteHandler, updateHandler})
➡️TodoList 컴포넌트로부터 이 속성들을 전달받는다. (이 속성들은 TodoBox컴포넌트로부터 전달되었다)
const [title, setTitle] = useState(todo.title);
➡️todo객체의 title 속성으로 초기값을 설정해주는데
이 값은 TodoBox컴포넌트에서 관리되고 있는 리스트의 title속성이 가져와지는 것이다.
➡️id값은 primary key (기본키)로 고유한 값을 가지기때문에 title만 바꿔주어 데이터를 관리한다.
const updateValue = () ⇒ { ... }
➡️활성화된 수정폼 if문안에서 버튼 안에 onClick으로 작성된 이 이벤트핸들러는
다시 TodoBox컴포넌트 리스트를 수정할 수 있도록 TodoBox컴포넌트까지 수정된 값을 보내는 기능 수행updateHandler() 에 id와 title값을 전달한다. 이 updateHandler()는 TodoBox컴포넌트로부터 전달된 함수이다.

setUpdateMode(false);
➡️다시 false로 바꿔주는 기능을 하여 수정이 끝나면 수정폼을 다시 닫아주는 기능

▶️실습 - TodoBox컴포넌트 적용

  // 3. 할 일 수정
  const updateTodoList = (todo) => {
    todoList.map((item) => {
      if (item.id === todo.id) {
        item.title = todo.title;
      }
    });
  };

함수의 인자로는 (todo)를 받고 있다. 이는 객체이므로 updateHandler()안에는 객체를 전달하게된다.

수정이 잘 되고 있는 것을 확인할 수 있다.
이 후 자바스크립트의 express 서버 등을 활용하여 백엔드와 프론트엔드를 연결하는 것도 가능하다.

Express회고는 별도의 회고로 작성해야겠다!

🚀 회고를 통해 TodoBox컴포넌트로부터 Todo컴포넌트까지의 프로젝트 흐름 등을 깨달을 수 있었고

구조적으로는 이해할 수 있었지만

Todo리스트를 처음부터 다시 설계해보려할때 이 과정을 생각해낼 수 있는지가 관건인것 같다.

비슷한 프로젝트를 진행하여서 익숙하게 만드는 방법 밖에 없을 것 같다!

저작자표시 (새창열림)