Todo 리스트 (배열의 push, forEach, map, filter 활용)

 

콘솔에 찍어보는 초간단 Todo 리스트 프로젝트

1. todo 리스트를 담을 todos 배열 생성

let todos = [];

 

2. addTodo 함수 생성

기본 로직

1. addTodo의 파라미터로는 content를 받을 것
2. todo 객체를 생성
3. id는 배열의 길이 + 1로 설정
4. content의 내용은 인자의 content가 됨
5. completed는 기본적으로 false로 설정
6. todos 배열에 만든 todo 객체를 push
7. 콘솔에 보여주기 위해서 displayTodos() 함수 호출 (아직 만들지 않았음)

function addTodo(content) {
  const todo = {
    id: todos.length + 1,
    content: content,
    completed: false,
  };
  todos.push(todo);
  displayTodos();
}

 

3. displayTodos 함수 생성

기본 로직

1. 콘솔에 계속 출력을 해볼테니 먼저 ‘현재 todos ‘ 라는 내용을 출력
2. todos 배열에 forEach를 활용해서 콘솔에 아래와 같은 양식으로 출력
   • 1: content - ✅
   • 2: content - ❌

function displayTodos() {
  console.log('현재 todos ');
  todos.forEach((todo) =>
    console.log(`${todo.id}: ${todo.content} - ${todo.completed ? '✅' : '❌'}`)
  );
}

 

 

displayTodos를 구현 했으니 addTodo를 활용해서 아래 내용을 추가해보면

addTodo('자바스크립트 공부');
addTodo('리액트 공부');
addTodo('HTML/CSS 공부');

콘솔에 출력되는 모습은 아래와 같다

현재 todos 
1: 자바스크립트 공부 - ❌ 
2: 리액트 공부 - ❌ 
3: HTML/CSS 공부 - ❌

 

4. deleteTodo 함수 생성

기본 로직

1. 우리는 배열의 filter를 활용할 것
2. 삭제하고자 하는 Todo를 유일하게 식별할 수 있는 것은 id임
3. deleteTodo 함수에 id를 인자로 받아서 제거하고자 하는 id를 제외한 새로운 배열을 생성
4. 현재 todos 리스트를 새로운 배열로 재할당
5. displaytodos함수를 호출

function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  displayTodos();
}

 

 

deleteTodo는 로직을 생각하기가 어렵고 코드 구현은 생각보다 간단함

deleteTodo를 구현했으니 제거하고자 하는 id값 3을 넣으면

deleteTodo(3);

콘솔에 출력되는 모습은 아래와 같다

현재 todos 
1: 자바스크립트 공부 - ❌ 
2: 리액트 공부 - ❌

 

5. todoComplete 생성

기본 로직

1. 체크하려는 Todo를 유일하게 식별할 수 있는 것은 id임
2. todoComplete 함수에 id를 인자로 받을 것
3. todos 배열에 map을 사용해서 인자로 받은 id와 현재 todo의 id가 일치하는지 확인
4. 일치한다면 순회중인 todo 객체의 내용을 그대로 전달하되 completed 속성만 true로 변경
5. 일치하지 않는다면 그대로 todo를 return
6. 삼항연산자로 간단하게 표현이 가능 ( 코드가 한 줄일 때는 중괄호와 return은 생략 가능)
7. displayTodos 함수를 호출

function todoComplete(id) {
  todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: true } : todo
  );
  displayTodos();
}

 

 

todoComplete를 구현했으니 id에 1을 넣어서 호출한다면

todoComplete(1);

콘솔에 출력되는 모습은 아래와 같다

현재 todos 
1: 자바스크립트 공부 - ✅ 
2: 리액트 공부 - ❌

 

---

JS 전체 코드

let todos = [];
// addTodo
// deleteTodo
// todoComplete
// displayTodos

function addTodo(content) {
  const todo = {
    id: todos.length + 1,
    content: content,
    completed: false,
  };
  todos.push(todo);
  displayTodos();
}

function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  displayTodos();
}

function todoComplete(id) {
  todos = todos.map((todo) =>
    todo.id === id ? { ...todo, completed: true } : todo
  );
  displayTodos();
}

function displayTodos() {
  console.log('현재 todos ');
  todos.forEach((todo) =>
    console.log(`${todo.id}: ${todo.content} - ${todo.completed ? '✅' : '❌'}`)
  );
}

addTodo('자바스크립트 공부');
addTodo('리액트 공부');
addTodo('HTML/CSS 공부');
deleteTodo(3);
todoComplete(1);

 

노션으로 보고 싶다면?

https://short-echidna-b16.notion.site/Todo-push-forEach-map-filter-7e88fdf3a7fb4fcca283cbc0668ab5ec?pvs=4

Todo 리스트 (배열의 push, forEach, map, filter 활용) | Notion