[Ch3 - Ch4] Elements as Props와 Render Props

📚 Advanced React

 

컴포넌트를 유연하게 구성할 수 있도록 하는 패턴들 중에 Elements as Props과 Render Props 패턴에 대해 알아보도록 하자.

Ch3 Elements as Props

Button 컴포넌트를 구현한다고 가정을 하면, 여러 가지 설정을 필요로 하는 경우로 발생한다. 처음에는 간단하게 isLoading, iconColor, iconSize와 같은 props를 추가하는 방식으로 요구사항을 반영하겠지만, 결국 요구사항이 추가될수록 점점 컴포넌트가 점점 복잡해지고, 관리가 어려워지며, 코드를 읽기가 힘들어진다.

const Button = ({ isLoading, iconColor, iconSize, ... }) => { 
  return <button>{isLoading ? <LoadingIcon /> : null}</button>
 };

Elements as Props

이를 해결하는 방법으로 Elements as Props 패턴을 소개하는데, 해당 패턴에서는 props로 전달하는 것이 Element 자체가 된다고 한다.

<Button icon={<Loading />} />
<Button icon={<Error color="red" />} />

예를 들어 위와 같이 icon을 Element로 전달하게된다면, 버튼 컴포넌트에서 아이콘은 외부에서 완전히 독립적으로 관리되며, 버튼은 아이콘을 전달받아 렌더링 하는 역할만 수행하게 된다.

아이콘 속성 동적 조합하기

예를 들어, 버튼에서 아이콘을 사용할 때, 버튼의 size나 appearance에 따라 아이콘의 색상이나 크기가 달라져야 한다면 Elements as Props 패턴을 사용하여 기본 속성값을 설정하고, 이를 동적으로 아이콘에 전달할 수 있다.

const Button = ({ appearance, size, icon }) => { 
const defaultIconProps = {
    size: size === 'large' ? 'large' : 'medium',
    color: appearance === 'primary' ? 'white' : 'black',
  };

const newProps = {
...defaultIconProps,
// 전달된 아이콘 props 의 우선수위를 높게함
 ...icon.props,
  };

const clonedIcon = React.cloneElement(icon, newProps); 

return <button>Submit {clonedIcon}</button>;
};

위의 방식은 아이콘의 기본 속성값을 관리하면서, 외부에서 전달된 속성을 덮어쓸 수 있게 해 준다.

//기본적으로 secondary 버튼은 검정색 아이콘을 사용하는데, 외부에서 color="red"를 전달하여 빨간색 아이콘으로 덮어쓴다.
<Button appearance="secondary" icon={<Loading color="red" />} />

Button은 appearance나 size에 맞춰 아이콘의 색상과 크기를 자동으로 조정하고, 추가적으로 외부에서 특정 속성을 전달하여 이를 오버라이드할 수 있다.

Ch4 Render Props

Elements as Props 패턴은 유연한 설정에서는 유용하게 사용할 수 있지만, 컴포넌트가 상태를 관리하고 그 상태를 자식 컴포넌트로 전달해야 할 경우에는 문제가 발생된다. 예를 들어, Button 컴포넌트가 isHovered 상태를 관리하고, 이 상태를 아이콘 컴포넌트로 전달해야 할 경우를 생각해 보자.

const Button = ({ renderIcon }) => {
  const [isHovered, setIsHovered] = useState(false);
  return <button onMouseOver={() => setIsHovered(true)}>Submit {renderIcon()}</button>;
};

버튼이 isHovered 상태를 관리하고, 이를 아이콘에 전달해야 한다면 어떻게 할 수 있을까?

Render Props

Render Props 패턴을 사용하면, 상태를 함수로 전달하고 그 함수가 요소를 반환하게 할 수 있다. 즉 상태를 컴포넌트 외부에서 처리하면서도, 내부에서 필요한 데이터를 자식 컴포넌트에 전달할 수 있게 된다.

const Button = ({ renderIcon }) => {
  const [isHovered, setIsHovered] = useState(false);
  const iconProps = { isHovered };
  return <button onMouseOver={() => setIsHovered(true)}>Submit {renderIcon(iconProps)}</button>;
};

이제 renderIcon함수는 iconProps를 받아서 해당 상태에 따라 아이콘을 렌더링 하게 된다.

<Button renderIcon={(props) => <HomeIcon {...props} />} />
<Button renderIcon={(props) => (
  <HomeIcon {...props} size="large" color="red" />
)} />
<Button renderIcon={(props) => (
  <HomeIcon fontSize={props.size} style={{ color: props.color }} />
)} />

이 패턴의 장점은 상태와 props를 명확하게 전달하고, 상태가 바뀔 때마다 그 상태를 기반으로 아이콘이 업데이트되기 때문에 명시적이고 직관적이다.

Stateful Logic 공유하기

Render Props 패턴은 상태를 여러 컴포넌트 간에 공유할 때 유용하다. 예를 들어, ResizeDetector라는 컴포넌트가 화면의 너비를 추적해야 한다고 가정해 보자.

const ResizeDetector = ({ children }) => {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const listener = () => setWidth(window.innerWidth);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, []);

  return children(width);
};

ResizeDetector는 화면의 너비를 추적하고, 이를 자식 컴포넌트로 전달한다. 자식 컴포넌트는 이 값을 받아서 원하는 대로 레이아웃을 변경할 수 있다.

<ResizeDetector>
  {(width) => width > 600 ? <WideLayout /> : <NarrowLayout />}
</ResizeDetector>

Hooks로 대체된 Render Props

하지만 최근에는 Hooks가 상태 공유와 컴포넌트 간 데이터 전달을 훨씬 더 간단하게 처리할 수 있게 만들어 주었다. ResizeDetector 같은 컴포넌트를 Hook으로 변환하면, 코드가 훨씬 간결하고 명확해진다!

const useResizeDetector = () => {
  const [width, setWidth] = useState(0);
  useEffect(() => {
    const listener = () => setWidth(window.innerWidth);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, []);
  return width;
};

🔥 결론: 적절한 패턴 선택하기

✅ Elements as Props 패턴은 컴포넌트를 유연하게 구성할 수 있는 간단한 방법이다. 주로 상태 관리나 렌더링 로직이 복잡하지 않은 경우에 유용하며, 아이콘과 같은 요소를 전달하고, 그 요소의 속성을 동적으로 설정하는 데 유용하다.

 

✅ Render Props 패턴은 상태를 다른 컴포넌트와 공유할 때 유용하며, 상태를 명시적으로 전달할 수 있다. 하지만 Hooks가 대부분의 경우 Render Props를 대체할 수 있기 때문에, React의 최신 버전에서는 Render Props 패턴보다는 Hooks를 사용하는 것이 일반적이라고 한다.

 

✅ 각 패턴은 상황에 따라 유용하게 활용될 수 있다. 컴포넌트를 효율적으로 설계하고 상태를 관리하는 방법을 잘 선택하는 것이 중요하다!