개인 과제의 피드백에서, 튜터님으로 부터 Nested Render Function는 지양하는 것이 좋다는 피드백을 받았다.

Nested Render Function

Nested Render Function을 번역 하면 '중첩 렌더링 함수' 이다. 말로 하먼 잘 모르겠으니 직접 어떻게 생긴 놈인지 살펴보자.

const renderTodoList = list => {
  return list.map(todo => {
    return (
      <ToDoRow key={todo.index} todo={todo} />
    );
  });
};

// ...

return <>
  {renderTodoList(todos)}
  </>

이렇게 컴포넌트를 반환하는 일반 함수를 말한다. 근데 왜 중첩 함수냐? 컴포넌트도 결국은 함수이기 때문이다.

왜 쓰지 말아야 할까?

예시 코드를 봤을 때는 그렇게 복잡하지도 않고, 어느 상황에서는 오히려 괜찮은 아이디어일 수도 있을지도 모른다.

하지만 일반적인 상황에서는 문제가 생길 수 있다.

1. 함수이기에, 컴포넌트가 렌더링 될 때마다 함수가 재생성 된다. 따라서 불필요한 함수의 재생성이 나타날 수 있다. (물론 useCallback으로 해결할 수 있겠지만... 무조건 memoizing하는 것은 그닥 좋아 보이지 않는다.)

2. 중첩된 컴포넌트가 많아질수록 가독성이 떨어진다. 이는 유지보수, 디버깅, 재사용 등을 힘들게 한다.

리팩토링

예시 코드를 아래처럼 리팩토링 해볼 수 있다.

const ToDoList = list => {
   return list.map(todo => (
    <ToDoRow
      key={todo.index}
      todo={todo}
    />
  )); 
}

...

const ToDoContaienr = () => {
  
  // ...
  
  return (
  	<>
      <ToDoList list={todos} />
    </>
  )
}

하지 말라는건 하지 말라는 이유가 있겠지? 나보다 훨씬 경험 많은 선배 개발자들이 말해주고 있으니.. 조그만 컴포넌트라도 귀찮다고 대충 때우지 말고 쪼개고 보자!