[항해 주특기 주차 5일차]

<회고록>

오늘은 만든 TodoList의 최적화 작업과 디자인 수정을 진행했다. 나는 최적화 작업을 진행했고 혜경님은 디자인 수정을 맡았다.

그래서 나는 오늘 TodoList의 어떤 부분들을 최적화 작업을 했는지를 설명하려고 한다.

 

1. Todo Insert Component

위 사진을 보면 working!!! 이라는 Drop Down 박스가 보일 것이다.

그리고 이 박스를 클릭하면 끝난 과제들의 리스트가 보이게 된다. 여기서 문제점은 클릭했을 때 TodoList, TodoToggleContainer는 리렌더링이 되어야 하는 것은 부정할 수 없는 사실이다. 하지만 여기서 TodoToggleContainer에 자식 컴포넌트인 StyledDropDown 컴포넌트는 리렌더링 되어서는 안된다. 이를 말로 설명하는 것 보다 직접 코드를 보고 설명하는 것이 더 쉬울 것 같다.

1) TodoToggleContainer

const onChangeHandler = useCallback(
    (event) => {
      const value = event.target.value;
      let checked = false;
      checked = value === "🌈 Done...! 🌈" ? true : false;
      dispatch(isDone(checked));
    },
    [dispatch]
  );
  
  return (
    <>
      <StyledListUI />
      <StyledDropDown onChangeHandler={onChangeHandler} />
    </>
  );

2) StyledDropDown

const StyledDropDown = ({ onChangeHandler }) => {

위 코드에서 DropDown자체는 리 렌더링이 일어날 필요가 없다. 왜냐하면 selectBox는 select시 자동적으로 바뀌기 때문이다.

근대 왜 바뀌는 것일까? 그 이유는 props에 있었다. TodoToggleContainer가 새롭게 만들어지면서 onChangeHandler도 새롭게 함수가 만들어진다. 이때 함수는 일급객체이며 여기서 onChangeHandler는 참조형 변수이다. 따라서 우리는 여기서 onChangeHandler 함수가 다시 만들어지는 것을 막을 필요가 있다. 그래서 나는 useCallback을 통해서 함수를 캐싱해둔 다음 이 캐싱한 함수를 통해서 함수가 다시 생성되는 것을 막았다.

 

위 사진을 보면 TODO DROP DOWN은 다시 렌더링이 되지 않는 것을 확인할 수 있다.

2. Todo List Components

맨 위에 사진에서 옆에  리스트 목록을 바꾸는 버튼들을 보았을 것이다. 이때 저 3개의 버튼을 누르면 밑에 Todo list item들의 크기가 변한다. 근데 여기서 문제점은 StyledToggle 컴포넌트는 리렌더링이 일어날 필요가 없는데 리 렌더링이 일어났다는 것이다.

1. Todo List

    <TodoListBlock>
      <StyledToggle />
      <TodoListItem
        todos={todos}
        workState={workState}
        toggles={toggles}
        onInsert={onInsert}
        onDelete={onDelete}
      />
    </TodoListBlock>

여기서 toggles가 toggle과 관련된 전역상태로 toggle을 눌렀을때 todoListItem들이 변하는 것은 사실이다. 하지만 StyledToggle까지 변하고 있다. 그래서 실제로 console을 들어가면 다음과 같이 뜨는 것을 확인할 수 있다.

여기서 TODO TOGGLE CONTAINER는 Styled Toggle 컴포넌트의 자식 컴포넌트다. 즉 Styled Toggle의 불필요한 리 렌더링으로 TODO TOGGLE CONTAINER까지 리 렌더링 되는 것을 확인할 수 있다. 즉 부모 컴포넌트의 렌더링으로 불필요한 자식 컴포넌트까지 리렌더링 되는 것이다. 나는 이것을 막기 위해서 컴포넌트를 캐싱해두었다. 즉 React.memo를 이용했다.

그랬더니 불필요하게 리렌더링되는 2개의 컴포넌트가 렌더링을 멈췄다.