[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 49회차 미션 - 35강 Redux 할일 목록 구현 최적화

할일 목록 구현 최적화

일단 어제 오류가 난 부분에 대해선 해결하지 못했다.
아래와 같은 오류가 발생했다고 하는데 나의 불만사항은 두가지다.

1. React devtools가 로컬에선 구동하지 않는다는 것 (파일URL에 대한 액세스 허용을 했음에도 불구하고)
2. todos.map is not a function이란 오류가 떴는데 누구에게도 도움을 구할 수 없다는 것.

선생님한테 1:1로 물어볼 수도 없고, 벨로퍼트 위키와 사이트에 들어가보면 누적되어있는 질문글이 수두룩하다. 패캠은 이런 사람들의 질문을 해소할 수 있는 커뮤니티를 만들어줘야 되는거 아닌가? 커뮤니티에 선생님이 들어와있지 않다고 하더라도 적어도 수강생들끼리는 서로 질문을 공유하면서 해결 못한 부분에 대해 같이 고민해볼 수 있는 장이라도 만들어줘야 하지 않나 싶다. (심지어 벨로퍼트 위키에 있는 코드를 똑같이 복사해다 붙여 넣었는데도 같은 오류화면이 뜬다.) 당최 이 오류가 해결이 안되니 다음진도조차 나갈 수 없다. 이렇게 시간을 보내는게 너무나 아까울 뿐이다. 아무튼 일정은 마쳐야 하기에 실습한 화면은 비록 에러화면 그대로지만 코드라도 따라해본다.

최적화를 위해 React.memo를 사용해 아래와 같이 코드를 수정해보도록 하자.

Todos.js

import React, { useState } from "react";

const TodoItem = React.memo(function TodoItem({ todo, onToggle }) {
  return (
    <li
      style=
      onClick={() => onToggle(todo.id)}
    >
      {todo.text}
    </li>
  );
});

const TodoList = React.memo(function TodoList({ todos, onToggle }) {
  return (
    <ul>
      {todos.map((todo) => (
        <TodoItem key={todo.id} todo={todo} onToggle={onToggle} />
      ))}
    </ul>
  );
});

function Todos({ todos, onCreate, onToggle }) {
  const [text, setText] = useState(""); //모든 상태를 리덕스에서 관리할 필요는 없음
  const onChange = (e) => setText(e.target.value);
  const onSubmit = (e) => {
    e.preventDefault();
    onCreate(text); //새로운데이터 등록
    setText(""); //텍스트값 초기화
  };

  return (
    <div>
      <form onSubmit={onSubmit}>
        <input
          value={text}
          onChange={onChange}
          placeholder="할 일을 입력하세요.."
        />
        <button type="submit">등록</button>
      </form>
      <TodoList todos={todos} onToggle={onToggle} />
    </div>
  );
}

export default React.memo(Todos);

useSelector 최적화

마찬가지로 여기도 적용화면이 나타나진 않지만 코드라도 따라해본다(…)
우리가 앱을 실행시킨 뒤 todo에 할일을 켰다 껐다 하면 이상하게도 관계도 없는 Counter가 같이 작동되는 것을 리덕스 개발자 툴로 확인 할 수 있다. 이것을 해결하는 두가지 방법이 있는데 먼저 첫번째 방법.

CounterContainer.js

function CounterContainer() {
  // const { number, diff } = useSelector((state) => ({
  //   number: state.counter.number,
  //   diff: state.counter.diff,
  // }));
  const number = useSelector((state) => state.counter.number);
  const diff = useSelector((state) => state.counter.diff);
//윗부분 네줄을 주석처리하고 아래 두줄을 추가해보자.

(...이하생략)
}

그리고 두번째 방법.

function CounterContainer() {
  const { number, diff } = useSelector(
    (state) => ({
      number: state.counter.number,
      diff: state.counter.diff,
    }),
    (left, right) => {
      return left.diff === right.diff && left.number === right.number;
    }
  );

이게 너무 복잡하면 shallowEqual을 써도 된댄다.

import { useSelector, useDispatch, shallowEqual } from "react-redux"; //shallowEqual임폴트 해주는 것을 잊지말자.

function CounterContainer() {
  const { number, diff } = useSelector(
    (state) => ({
      number: state.counter.number,
      diff: state.counter.diff,
    }),
    shallowEqual
  );

이렇게 하고 나면 최적화가 잘 되었을것이다.. (물론 나는 볼수없지만 ㅜ)
근데 이 shallowEqual이라는 것이 깊게 비교하는 건 아니고 얕게 비교하는것이라고 한다. 아직은 무슨말인지 모르겠구 나중에 필요하면 아래 블로그를 참고해서 더 찾아보도록 하자. 벨로퍼트의 위키를 참고하길 바라며..
오늘은 여기까지..
시청 영상 35강 10~11까지

프론트엔드 개발 올인원 패키지 with React Online. 👉 https://bit.ly/31Cf1hp