커밋 전략: 어느 단위로 커밋해야 할까?

기능별로 커밋을 잘게 나누면 나중에 코드 리팩토링이나 디버깅할 때 큰 도움이 된다.

예시로, 리액트 투두리스트 실습 프로젝트(초간단)의 작업에 커밋단위를 나눠보자.

투두리스트 구현 순서

1. todo 상태 만들기 (useState 사용, 구조: {id, content})
2. map()을 이용해 리스트 UI 출력
3. TodoList 컴포넌트 생성
4. TodoListItem 컴포넌트 생성 (각 항목 전용)
5. input, button 요소 만들기
6. input에 onChange로 입력값 상태 관리 (Controlled Component 방식)
7. button에 onClick 등록 → 새 todo 추가
   (id 생성 후 setTodoList([...]), 입력창 초기화)
8. TodoInput 컴포넌트로 분리
9. 삭제 기능 구현
   (filter() 사용해 선택한 항목 제거)
10. 수정 기능 구현
    (map()과 삼항 연산자로 id 일치 시 내용 변경)

커밋 타이밍 팁

하나의 기능이 완전히 작동하는 순간에 커밋하는 것이 바람직하다.
예를 들어 버튼을 만들고, 클릭 이벤트를 연결한 뒤, 해당 버튼이 원하는 기능을 수행할 수 있게 되었을 때 커밋하는 것이 좋다.

반면, 상태만 생성하고 화면에 표시되는 UI나 동작이 없는 단계에서는

바로 커밋하기보다는 관련된 작업을 조금 더 진행한 후, 하나의 기능 단위로 묶어 커밋하는 것이 효율적이다.

 

추천 커밋 타이밍 (총 6~8회 정도)

1. init: 프로젝트 초기 세팅 및 기본 구조 생성

• 기본 React 환경 세팅 (CRA 등), 컴포넌트 폴더 구조 생성 등

2. feat: todo 상태(useState) 생성 및 데이터 구조 설계

• useState로 [todoList, setTodoList] 만들고
• 객체 구조 {id, content} 정의

3. feat: todo 리스트 UI 출력 기능 구현

• map()으로 TodoList 렌더링
• key 설정 포함

4. feat: TodoListItem 컴포넌트 분리 및 연결

• 각 아이템을 별도 컴포넌트로 분리
• props 전달 (id, content, 등)

5. feat: input과 버튼 UI 및 상태 관리 추가

• 입력창, 버튼 만들고
• inputValue 상태 생성
• onChange 핸들러 연결 (Controlled Component 방식)

6. feat: todo 추가 기능 구현

• 버튼 클릭 시 새로운 todo 추가 (setTodoList([...]))
• 고유 id 설정 (예: Date.now() 등 사용)

7. feat: todo 삭제 기능 구현

• 각 아이템에 삭제 버튼
• filter()로 id !== 삭제할 id 구현

8. feat: todo 수정 기능 구현

• 수정 inputValue 연동
• map()으로 id 일치 시 새로운 content로 교체
• ...el 구조 분해 사용