React Children에 대한 타입 체킹 이해하기

React 자식 요소의 타입 확인

React 컴포넌트를 사용할 때, 종종 자식 요소들을 props로 전달합니다. 때로는 특정 유형의 React 요소가 자식으로 전달되었는지 확인해야 할 수도 있습니다. 이 블로그 포스트에서는 React 자식 요소에 대한 타입 확인을 어떻게 할 수 있는지 알아보겠습니다.

문제점

List 컴포넌트와 ListItem 컴포넌트라고 가정해봅시다. List 컴포넌트의 렌더 메소드에서는 ListItem 타입의 자식 요소를 식별하고 특별한 동작을 수행하려고 합니다.

import ListItem from 'list-item';

...

React.Children.map(children, child => {
  if (isListItem(child)) {
    // ListItems에 대해 특별한 동작 수행
    return (...);
  }
  return child;
})

첫 번째 구현인 isListItem 함수가 예상대로 작동하지 않는 상황에 직면할 수 있습니다:

// 이 구현은 작동하지 않음
function isListItem(element) {
  return (element.type === ListItem);
}

대신, 다음과 같은 구현을 사용하여 올바른 타입 확인을 수행할 수 있습니다:

// 이 구현은 작동하지만 특정 상황에서 오류가 발생할 수 있음
function isListItem(element) {
  return (element.type.displayName === 'ListItem');
}

// 이 구현은 신뢰성 있게 작동함
function isListItem(element) {
  return (element.type === ().type);
}

설명

첫 번째 isListItem 구현이 예상대로 작동하지 않는 이유는 React의 내부 동작 및 컴포넌트에 대한 타입 할당 방식 때문입니다. 컴포넌트 타입을 직접 가져온 구현은 원하는 결과를 얻지 못합니다.

하지만, 두 번째 isListItem 구현은 컴포넌트의 displayName과 가져온 컴포넌트 클래스의 이름을 비교하여 작동합니다. 이 접근 방식은 많은 경우에 충분할 수 있지만, Uglify와 같은 도구를 사용하거나 react-redux나 connect()와 같은 라이브러리를 사용하는 경우와 같이 display 이름이 변경될 수 있는 경우에는 오류가 발생할 수 있음을 주의해야 합니다.

세 번째 isListItem 구현은 더 신뢰할 수 있는 솔루션을 제공합니다. 요소의 type을 새로 생성한 컴포넌트의 type과 직접 비교함으로써 원하는 유형의 요소인지 정확하게 판단할 수 있습니다.

결론

React에서는 컴포넌트에 전달된 자식 요소의 타입을 확인해야 할 때가 있습니다. 타입 확인에 대한 첫 번째 구현은 예상대로 작동하지 않을 수 있지만, 이 블로그 포스트에서 제공하는 대안을 사용하면 특정 유형의 자식 요소를 정확하게 식별하고 원하는 동작을 수행할 수 있습니다. isListItem 함수의 적절한 구현을 사용하여 React 컴포넌트의 유연성과 제어력을 향상시킬 수 있습니다.

참고 자료 :

https://stackoverflow.com/questions/42769843/type-checking-react-children

같은 카테고리의 다른 글 보기 :

reactjs