`Stack` causes unexpected spacing when children are re-rendered

[yangwooseong]

Summary

스택의 children 에 리렌더링이 일어날 때 원하지 않는 spacing 이 주입될 수 있습니다.

Reproduction process

bezier-react/packages/bezier-react/src/components/Stack/Stack/Stack.tsx

Lines 48 to 88 in 9c579d2

	const firstValidElementIdx = useRef(-1)
	return (
	<Styled.Container
	ref={forwardedRef}
	as={as}
	data-testid={testId}
	style={style}
	className={className}
	interpolation={interpolation}
	direction={direction}
	justify={justify}
	align={align}
	{...rest}
	>
	{ Children.map(
	children,
	(element, index) => {
	if (!isValidElement(element)) { return element }
	/**
	* NOTE: this assumes that this element is `StackItem`.
	*
	* Even if the child is not a `StackItem` component,
	* it could forward the prop to `StackItem` deeper in the tree,
	* or implement a custom behavior compatible with `StackItemProps`.
	*/
	if (firstValidElementIdx.current === -1) { firstValidElementIdx.current = index }
	return cloneElement(element, {
	...element.props,
	direction,
	marginBefore:
	element.props.marginBefore ??
	(index > firstValidElementIdx.current ? spacing : 0),
	})
	},
	) }
	</Styled.Container>
	)
	})

Stack 이 spacing 을 받아서 StackItem 의 marginBefore 로 넘기는 조건으로, StackItem 이 첫 번째 React element 보다 뒤에 있는지를 판단하고 있습니다. 이 때 useRef로 index 를 저장하고 있다 보니 children이 리렌더링이 일어나서 바뀌더라도 index가 갱신되지 않습니다. 예를 들면 다음과 같은 상황입니다.

리렌더링 전

<Stack spacing={2}>
  <StackItem>1<StackItem>

  <StackItem>2<StackItem>
</Stack> // firstValidElementIdx.current = 0

리렌더링 후

<Stack spacing={2}>
  false

  <StackItem>2<StackItem>
</Stack> // firstValidElementIdx.current 는 여전히 0 이므로 첫 번째 StackItem 에 marginBefore 가 들어감

Version of bezier-react

1.7.1

Browser

No response

Operating system

• macOS
• Windows
• Linux

Additonal Information

No response

[sungik-choi]

• Stack -> LegacyStack 으로 변경하며 해당 이슈는 더 이상 팔로업하지 않을 예정.

[channeltalk]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/67bfe9b82b4c5f88227b