React - passing JSX as children

정지현·2024년 5월 5일

React

목록 보기

1/8

예전부터 리액트로 for loop을 사용해 수많은 리스트를 그려야 하는 경우, 주로 React.memo를 사용해서 렌더 부분의 rerender를 막는 용도로 사용해왔다. 특히 RN에서의 차트를 그리는 경우(RN단에서 그려야 하는 경우,) 특히 효과적이었다.

하지만 컴포넌트를 렌더해서 내려주는 {children} 방식으로도 리렌더 현상을 막을 수 있다고 하는데, 이참에 한번 알아보면 좋다고 생각했다.

앞으로 진행하게 될 사이드 프로젝트에서 무엇보다 최대한 최적화된 코드만을 사용하면서 진행하고 싶기 때문에, 또 기록하는 것을 잊고 있었기 때문에 겸사겸사 진행해보기로 했다.

1. Children 은 어떤 이유 때문에 사용하고, 뭐가 좋은 것일까?

리액트 최신 docs에서 내용을 찾아보면 기존 사용하던 React.children은 deprecated되었고 children과 관련한 내용은 Passing JSX as children 항목에서 확인할 수 있었다.

import Avatar from './Avatar.js';

function Card({ children }) {
  return (
    <div className="card">
      {children}
    </div>
  );
}

export default function Profile() {
  return (
    <Card>
      <Avatar
        size={100}
        person={{ 
          name: 'Katsuko Saruhashi',
          imageId: 'YfeOqp2'
        }}
      />
    </Card>
  );
}

위의 코드에서 children의 핵심은, children을 소비하는 Card 컴포넌트가 children이 jsx라는 것밖에 모른다는 것이다.(arbitrary JSX) 즉 wrapper에서는 이미 완성된 jsx Avatar 컴포넌트를 받을 뿐이기 때문에 wrapper가 rerender 조건을 충족해도 prop으로 받는 jsx가 같다면 children은 rerender 하지 않는다.

2. 기존 알고있던 것과 비교

따라서 지금까지 확인한 rerender 규칙은 다음과 같다.

1. 아무런 메소드 없이 사용한다면, 컴포넌트는 다음과 같을 때 rerender 된다.

a. 상위 컴포넌트가 rerender될때
b. 내부 state가 rerender 될때
c. context 내부의 밸류가 변경될 때
d. hook 이 리턴하는 밸류가 변경될 때

2. React.memo를 사용한다면, 컴포넌트는 다음과 같을 때 rerender 된다.

a. 상위 컴포넌트가 rerender 될때, 커스텀 평선이나 없다면 사용하는 prop을 shallow compare 한 후 다르다면 rerender.
b. 내부 state가 rerender 될때
c. context 내부의 밸류가 변경될 때
d. hook 이 리턴하는 밸류가 변경될 때

3. {children}으로 사용된 경우

a. 상위 컴포넌트가 rerender 될때, jsx의 형태가 변화한다면 rerender
b. 내부 state가 rerender 될때
c. context 내부의 밸류가 변경될 때
d. hook 이 리턴하는 밸류가 변경될 때

3. 직접 간단하게 테스트 해보기로 하자.

간단한 Todo list를 만들었다.

export default function Todo({ list, addList, popList, type }: Props) {
  const Item = type === 'without' ? TodoItemWithoutChildren : TodoItemWithMemo;
  const isWithChildren = type === 'withChildren';
  const [, setUseless] = useUseless();
  return (
    <section>
      <strong>{type}</strong>
      <TodoForm addList={addList} /> // 리스트 추가
      <TodoHandle label="pop" popList={popList} /> // 리스트 제거
      <TodoHandle
        label="setUseless"
        popList={() => setUseless((prev) => !prev)}
      /> // 의미없는 hook 값의 변경

      {!isWithChildren &&
        list.map((item, index) => (
          <Item index={index} item={item} key={item.id} />
        ))}

      {isWithChildren && (
        <WithChildren>
          {list.map((item, index) => (
            <TodoItemWithChildren index={index} item={item} key={item.id} />
          ))}
        </WithChildren>
      )}
    </section>
  );
}