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

[yangwooseong]

Summary

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

Reproduction process

https://github.com/channel-io/bezier-react/blob/9c579d221b486c50e8f529dd7e2dc5222f758d3d/packages/bezier-react/src/components/Stack/Stack/Stack.tsx#L48-L88

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

• [X] macOS
• [ ] Windows
• [ ] Linux

Additonal Information

No response

[sungik-choi]

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