이 글은 2026년 03월 18일 작성된 글입니다.
오늘은 바닐라 JavaScript로 만든 Todo App을 이어서 구현했고,
이전에 만들었던 React Todo App도 처음부터 다시 복습했다.
바닐라 프로젝트에서는 조건 렌더링, 컴포넌트 분리, LocalStorage 저장을 구현했고
React 프로젝트에서는 Vite 프로젝트 생성부터 Todo 등록 / 삭제 / 체크 토글 로직까지 다시 정리했다.
1. && 연산자로 조건 처리
간단한 조건에서는 삼항 연산자 대신 && 연산자를 사용하면 코드가 더 간결해진다.
<li style="${todo.checked && 'text-decoration: line-through'}">
<input type="checkbox" ${todo.checked && "checked"}>
<span>${todo.text}</span>
</li>- 조건이
true일 때만 뒤의 값이 적용된다. false면 아무 값도 렌더링되지 않는다.
2. TodoList 생성
Todo 목록을 관리하는 컴포넌트.
import TodoItem from "./TodoItem.js";
function TodoList({ $target, initialState, onDelete, onToggle }) {
const $container = document.createElement("div");
const $ul = document.createElement("ul");
$container.appendChild($ul);
$target.appendChild($container);
this.state = initialState;
$container.addEventListener("click", (e) => {
const id = Number(e.target.dataset.id);
if (e.target.classList.contains("del_btn")) onDelete(id);
if (e.target.classList.contains("toggle_btn")) onToggle(id);
});
this.setState = (next) => {
this.state = next;
this.render();
};
this.render = () => {
$ul.innerHTML = "";
this.state.forEach((todo) =>
new TodoItem({ $target: $ul, todo })
);
};
this.render();
}
export default TodoList;이벤트 위임을 사용하여 삭제 / 체크 이벤트를 한 곳에서 처리했다.
3. TodoItem 생성
각 Todo 항목을 렌더링하는 컴포넌트.
function TodoItem({ $target, todo }) {
const $li = document.createElement("li");
$li.style.textDecoration = todo.checked ? "line-through" : "";
$li.innerHTML = `
<input class="toggle_btn" type="checkbox" data-id="${todo.id}" ${todo.checked ? "checked" : ""}>
<span>${todo.text}</span>
<button class="del_btn" data-id="${todo.id}">X</button>
`;
$target.appendChild($li);
}
export default TodoItem;체크 상태에 따라 취소선 스타일을 적용했다.
4. LocalStorage 유틸 만들기
Todo 데이터를 새로고침 후에도 유지하기 위해 LocalStorage를 사용했다.
export function getStorage(key) {
try {
const stored = localStorage.getItem(key);
if (stored == null) return null;
return JSON.parse(stored);
} catch {
return null;
}
}
export function setStorage(key, data) {
try {
localStorage.setItem(key, JSON.stringify(data));
} catch {
console.log("저장 중 오류 발생")
}
}setStorage→ 데이터 저장getStorage→ 데이터 조회 (없으면 기본값 반환)
5. React Todo App 복습
이전에 만들었던 React Todo App도 처음부터 다시 복습했다.
프로젝트 생성
npm create vite@latest프로젝트 생성 후 React 템플릿을 선택하여 기본 환경을 구성했다.
Prettier 설정
코드 스타일을 맞추기 위해 Prettier 플러그인을 설치하고
프로젝트 루트에 .prettierrc 파일을 생성했다.
6. App.jsx Todo 로직 구현 복습
App.jsx에서 Todo 상태 관리와 함께
등록(add), 삭제(remove), 체크 토글(toggle) 기능을 구현했다.
addTodo→ 새로운 Todo 추가removeTodo→ Todo 삭제toggleTodo→ 체크 상태 변경
✅ 정리
&&연산자를 활용해 조건 처리를 간결하게 작성했다.- TodoList / TodoItem을 분리해 컴포넌트 구조를 만들었다.
- LocalStorage를 활용해 Todo 데이터를 저장했다.
- React Todo App을 처음부터 다시 복습하며 Todo 등록 / 삭제 / 체크 토글 로직을 구현했다.
강사님의 강의로 학습한 것이외에도 개인적으로 다시 상기시키며 복습을 해보아야 할 거 같다는 생각이 들어서, 틈틈히 복습을 할 생각이다.
