Conversation
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 Pull Request는 React + Vite 기반의 새로운 Todo 앱 프로젝트의 기본 구조를 설정합니다. ESLint와 Prettier를 설정하여 코드 품질과 스타일을 관리하고, 불필요한 파일이 저장소에 포함되지 않도록 .gitignore를 설정했습니다. 초기 개발 환경을 구축하여 효율적인 React 개발을 위한 기반을 마련했습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| function App() { | ||
| const [todos, setTodos] = useState(['할 일 1', '할 일 2', '할 일 3']) | ||
|
|
||
| const handleOnSubmit = (e) => { | ||
| e.preventDefault() | ||
| const form = e.target | ||
| setTodos([form.todo.value, ...todos]) | ||
| } | ||
| const removeTodo = (selectedTodo) => { | ||
| const filterTodos = todos.filter((todo, index) => index != selectedTodo) | ||
| setTodos(filterTodos) | ||
| } | ||
| return ( | ||
| <> | ||
| <form onSubmit={handleOnSubmit}> | ||
| <input type="text" name="todo" placeholder="TO DO" /> | ||
| <button type="submit">등록</button> | ||
| </form> | ||
| <ul> | ||
| {todos.map((todo, index) => ( | ||
| <li key={index}> | ||
| {todo} <button onClick={() => removeTodo(index)}>X</button> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </> | ||
| ) | ||
| } |
There was a problem hiding this comment.
현재 todos 상태는 문자열 배열로 관리되고 있으며, map 함수에서 index를 key로 사용하고 있습니다. 이는 React에서 안티패턴으로 알려져 있으며, 항목이 추가, 삭제, 또는 재정렬될 때 예기치 않은 동작을 유발할 수 있습니다.
각 todo 항목이 고유한 ID를 갖도록 상태 구조를 변경하는 것이 좋습니다. 이렇게 하면 안정적인 key를 제공할 수 있고, 상태 관리도 더 용이해집니다.
아래와 같이 수정하는 것을 제안합니다:
todos상태를{ id: number, text: string }형태의 객체 배열로 변경합니다.- 새로운
todo를 추가할 때 고유 ID를 생성합니다. (예: 카운터 상태 사용) todo를 삭제할 때index대신id를 사용합니다.map함수에서keyprop으로todo.id를 사용합니다.todo추가 후 입력 필드를 초기화하여 사용자 경험을 개선합니다.- 빈
todo가 추가되지 않도록 입력값 유효성 검사를 추가합니다.
function App() {
const [todos, setTodos] = useState([
{ id: 1, text: '할 일 1' },
{ id: 2, text: '할 일 2' },
{ id: 3, text: '할 일 3' },
])
const [nextId, setNextId] = useState(4)
const handleOnSubmit = (e) => {
e.preventDefault()
const form = e.target
const text = form.todo.value.trim()
if (!text) {
return
}
setTodos([{ id: nextId, text }, ...todos])
setNextId(nextId + 1)
form.reset()
}
const removeTodo = (idToRemove) => {
setTodos(todos.filter((todo) => todo.id !== idToRemove))
}
return (
<>
<form onSubmit={handleOnSubmit}>
<input type="text" name="todo" placeholder="TO DO" />
<button type="submit">등록</button>
</form>
<ul>
{todos.map((todo) => (
<li key={todo.id}>
{todo.text} <button onClick={() => removeTodo(todo.id)}>X</button>
</li>
))}
</ul>
</>
)
}Updated README to reflect project details and features for the React Todo App.
predevho
changed the title
|
README에 기능 설명과 구조 개요 설명이 잘 되어 있어서 이해하기 좋았다고 생각합니다! |
|
기존 코드도 안보시고, Copilot도 없이 만드셨다고 들었는데 기본 기능에 충실하고, 컴포넌트 분리까지 너무 잘 만들어주신 것 같습니다! |
|
깔끔하게 잘 구현하신 것 같습니다! 미완료된 데이터가 직관적으로 잘 보여서 좋은 것 같습니다 ㅎㅎ |
5 participants
✅ React Todo App
📌 프로젝트 소개
React의 핵심 개념인 컴포넌트 분리, Custom Hook, 상태 관리(useState/useRef) 를 직접 구현해보는 Todo 앱입니다.
할 일 추가 / 완료 토글 / 삭제 기능을 갖추고 있으며, 관심사 분리 원칙에 따라 로직과 UI를 구분하여 작성했습니다.
🛠 기술 스택
⚙️ 구현 기능
🗂 컴포넌트 구조
데이터 흐름
useTodostodos상태 및 CRUD 로직 관리AppTodoWriteFormaddTodo호출TodoListTodoItem렌더링TodoItem🚀 테일윈드
직접 작성하는데 어려움을 느껴서 claude에 도움을 받아 작성함
