atomic component 에 ref 넘기기

[jeonbyeongmin]

아래처럼 forwardRef 를 감싸면 ref 를 내가 정의한 컴포넌트에 넘길 수 있음.
styled 로 생성한 컴포넌트에는 원래 ref를 넘길 수 있게 되어있음

const IconButtonCore = forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
  const { name, size = 'md', onClick, ...rest } = props;

  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    if (!onClick) return;
    e.stopPropagation();
    onClick(e);
  };

  return (
    <button ref={ref} onClick={handleClick} {...rest}>
      <Icon name={name} size={iconSize[size]} />
    </button>
  );
});

IconButtonCore.displayName = 'IconButtonCore';

export const IconButton = styled(IconButtonCore)`
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 5px;

  background-color: transparent;

  ${({ variant, colorScheme = 'primary', theme }) => {
    if (variant === 'solid') {
      return `
        background-color: ${theme.colors[colorScheme][100]};
        border: 1px solid ${theme.colors[colorScheme][100]};
        color: ${theme.colors.white};
        &:hover {
          background-color: ${theme.colors[colorScheme][200]};
          border: 1px solid ${theme.colors[colorScheme][200]};
        }
        &:active {
          background-color: ${theme.colors[colorScheme][300]};
          border: 1px solid ${theme.colors[colorScheme][300]};
        }
        `;
    }

    if (variant === 'outline') {
      return `
        border: 1px solid ${theme.colors[colorScheme][200]};
        color: ${theme.colors[colorScheme][200]};
        &:hover {
          background-color: ${theme.colors.lighten[100]};
        }
        &:active {
          background-color: ${theme.colors.lighten[200]};
        }
        `;
    }
  }}

  &:disabled {
    opacity: 0.5;
    pointer-events: none;
  }
`;

[sumi-0011]

굳쟙
ref를 사용할 수 있는 것 이외에도,
스타일 관련 props와 그렇지 않은 props를 분리할 수 있다는 면이 있어 좋네요!