오늘은 MVC TodoList V2를 만들어 보면서 배웠던 내용을 정리해보는 시간을 갖겠다.

1. setState를 왜 쓰는지?

직접 라이브 코딩한다고 생각을 하면서 한줄 한줄 코딩을 해나가다가 문득 setState 함수를 사용하지 않고 render 함수로 렌더만 해주면 되지 않을까? 라는 생각이 들었다.

이후 경현님께 코드 리뷰를 부탁하여 이러한 의견을 여쭤보니 다음과 같은 이점때문에 setState 함수를 만들어 사용하는 것이 좋다는 결론이 나왔다.

  1. 관리해야할 상태 객체가 늘어나 확장성이 요구될 때 용이하다.

  2. state에 대한 에러가 발생하였을 때 에러 핸들링이 용이하다. (상황에 따라 렌더링 할지 말지 결정 가능)

  3. state가 변경되거나 재할당 되는 경우를 한곳에서 관리하여 용이하다.

2. filter 함수를 사용한 코드 리팩터

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// before
let filteredTodos;
if (state.filterId === "completed") {
  filteredTodos = state.todos.filter((todo) => todo.completed);
} else if (state.filterId === "active") {
  filteredTodos = state.todos.filter((todo) => !todo.completed);
} else {
  filteredTodos = state.todos;
}

// after
const filteredTodos = state.todos.filter((todo) => {
  if (state.filterId === "completed") return todo.completed;
  if (state.filterId === "active") return !todo.completed;
  return todo;
});

if 문으로 filter 함수 반환값이 다르게 filteredTodos 값이 할당되는 경우라면 filter 함수 안에 로직을 넣어서 해결해보자.

=> 훨씬 더 간결해진다.

3. MVC 패턴으로 나누었다면 그에 알맞게 자신만의 역할을 하도록 분류한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// before
const addTodo = (content) => {
  state.todos = [
    { id: generateNextTodoId(), content, completed: false },
    ...state.todos,
  ];
  setState({ todos: state.todos });
};

// after
const addTodo = (content) =>
  setState({
    todos: [
      { id: generateNextTodoId(), content, completed: false },
      ...state.todos,
    ],
  });

위 예제에서 addTodo 함수는 내부에서 state.todos에 새로운 값을 할당 해준뒤 state를 변경하는 함수를 호출하여 렌더링 해주고 있다.

하지만, addTodo 함수의 기능은 Model의 todos 배열에 todo 요소 하나를 추가하는 것일 뿐이므로 before 처럼 state.todos(원본)에 재할당 하는 것은 옮지 않다.

setState 함수에게 새로운 객체(상태)를 전달하여 state의 변경에 따라 화면에 렌더링 되도록 로직을 짜는 것이 더 통일성을 지킬 수 있다.

4. 함수의 매개변수를 명확하게 적어주자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// before
const toggleAllCompleted = (boolean) => {
  state.todos = state.todos.map((todo) => ({ ...todo, completed: boolean }));
  setState({ todos: state.todos });
};

// after
const toggleAll = (checked) => {
  checked
    ? setState({
        todos: state.todos.map((todo) =>
          !todo.completed ? { ...todo, completed: checked } : todo
        ),
      })
    : setState({
        todos: state.todos.map((todo) =>
          todo.completed ? { ...todo, completed: checked } : todo
        ),
      });
};

before 처럼 매개변수를 boolean 으로 설정하는 것은 옳지 않다. boolean은 타입을 나타내는 것이지 매개변수에 대한 설명으로는 부적절하다.

after 코드에서는 인수로 넘어온 모든 check를 토글로 켰다 껐다 할 수 있는 함수이다.

5. 이벤트 핸들러 사용시 이벤트 객체와 선택한 요소를 명확히 이해하자

오늘 코딩할 때 이 부분에서 문제를 계속 부딪혀서 시간을 많이 할애하였다.

1
2
3
4
5
6
7
8
9
10
11
$todoList.addEventListener("dblclick", (e) => {
  e.path[2].classList.add("editing");
  // e.target.parentNode.parentNode.classList.add('editing');

  e.path[1].nextElementSibling.addEventListener("keyup", (e) => {
    const content = e.target.value.trim();
    if (e.key !== "Enter" || content === "") return;

    editTodo(content, e.path[1].dataset.id);
  });
});

위 코드에서 ul 태그에서 더블클릭 이벤트 발생하면 div가 안보이게되고 input이 보이게 된다.

이 때, 내가 어떤 요소를 선택하여 어떤 타입의 이벤트를 등록하였고 그 타입에 따른 이벤트 객체는 무엇이 나오는지를 명확히 이해하고 코딩을 하자.

헷갈린다면 console.log()를 찍어보면서 확인하자. 그림을 그리거나 HTML 구조와 비교해가면서 이해하면 수월하다.

소감

오늘 MVC TodoList V2를 만들어보면서 아침 10시부터 저녁 12시까지 이거만 집중해봤는데, 확실히 아직 익숙하지 않아서 버벅거리는 거 같다고 생각이 든다. 이해가 안되는 부분은 없지만 손으로 코딩이 술술 나오지가 않아서 어렵게 느껴졌다. 앞으로도 더 손 코딩을 많이 해보는 습관을 길러야 겠다.