flex, grid 스타일 정렬을 맞추기 위해서 empty component를 사용하는건 안티패턴인가요 ?

예를 들면 justify-content: space-between 대신 혹은 자식 아이템 우측 정렬을 시키고 싶어서 flex: 1 인 빈 div를 넣거나 하는 걸 말씀하시는 건가요? 저는 안티 패턴이라는 말은 들어본 적 없긴 합니다. 그리고 전 리액트 개발자지만 취미 삼아 SwiftUI 로 개발을 해본 적이 있는데 SwiftUI에서는 공식 API인 게 신기했어요. https://developer.apple.com/documentation/swiftui/spacer 대신 의도를 명확히 알 수 있게 리액트 같이 컴포넌트화가 가능하다면 의도에 맞는 이름(Spacer 라던지)으로 컴포넌트화해주시고, 그런 것이 불가능하다면 주석 등으로 의도를 알 수 있게 해주는 편이 유지보수하는 데에는 좋을 거 같아요.

저는 스타일링만을 위한 컴포넌트(ex, 내용이 없는 div 태그)는 최대한 만들지 않으려고 하는 편이에요. 브라우저의 호환성이 떨어져, flex를 사용하는 게 힘든 경우가 아니라면 원하는 스타일링을 할 수 있을 것이기 때문에 '필요성을 못느낀다'가 조금 더 가까울 수 있겠네요. 물론, 복잡한 스타일링이 요구되는 경우라면 얘기가 다를 수도 있을 것 같기는 해요. (제가 아직 그정도까지 겪어본 게 아닐 수 있기 때문에) 앞서 답변자분께서 얘기해주신 것 처럼 스타일링만을 위한 컴포넌트는 렌더링된 화면을 봐야 그 역할이 이해가 될 수 있기 때문에, 코드 상에서 어떤 역할을 하는지 확인하기 힘들 수 있습니다. 따라서, 컴포넌트의 이름 또는 주석을 통해 역할을 분명하게 알려주는 것이 필요할 것 같아요. ps. empty 컴포넌트를 사용하셨던 코드도 공유해주시면, 스타일링의 방법은 무궁무진하니 좀 더 얘기해볼 수 있을 것 같아요.

빈(empty) 컴포넌트를 사용하여 flex나 grid에서 정렬을 조절하는 것은 어느 정도 안티패턴으로 볼 수 있습니다. 이러한 방식은 레이아웃에 관한 코드를 비효율적으로 만들고 유지 관리가 어려울 수 있습니다. 대신 다음과 같은 대안 방법을 사용하실 수 있습니다. 1. Flexbox의 경우 ' justify-content ', ' align-items ', ' align-self ' 등의 속성을 사용하여 아이템의 정렬을 조절할 수 있습니다. 2. Grid의 경우 ' grid-template-rows ', ' grid-template-columns ', ' grid-row ', ' grid-column ' 등의 속성을 사용하여 아이템의 위치를 정확하게 지정할 수 있습니다. 또한, ' grid-gap ' 속성을 사용하여 아이템 간 간격을 조절할 수 있습니다. 3. 간격이나 레이아웃을 조절하는데 CSS의 ' margin ', ' padding ' 등의 속성을 활용할 수도 있습니다. 위의 방법들을 활용하면 빈 컴포넌트를 사용하지 않고도 원하는 레이아웃을 구현할 수 있습니다. 이렇게 하면 코드가 더 깔끔하고 유지 관리하기 쉬워질 것입니다. 그러나, 경우에 따라 특정 레이아웃을 구현하는 데 빈 컴포넌트를 사용하는 것이 더 간단하고 명확할 수도 있습니다. 이 경우, 빈 컴포넌트 사용이 합리적일 수 있으니 상황에 따라 판단하시면 됩니다. 그러나 대부분의 경우 CSS 속성을 활용하여 빈 컴포넌트를 사용하지 않고 레이아웃을 구현하는 것이 좋습니다.