JSX에서 구조만을 따로 떼어내는 것은 어디까지 가능할까.

UI 개발자들 사이에서 자주 나오는 이야기 중의 하나로 "구조", "표현", "기능"을 분리하라는 말이 있습니다.

보통 html, css, js와 1:1로 매칭하여 서로 엉겨붙지 않도록 잘 나누라는 의미로 쓰이지만, css 선택자를 html의 태그네임으로 두거나 js의 선택자와 공유하여 어떤 하나의 수정이 다른 부문에 사이드 이펙트를 주고 일파만파 커지는 것을 경계하라...가 이 말의 출처에 가장 가까울 겁니다.

spa 프레임워크에서는 선택자에 대한 고민은 "기능" 면에서는 거의 사라졌고, "표현" 역시 css in js나 tailwind css의 사용이 늘면서 많이 희석되어 현재는 철 지난 화두가 되었으리라 보입니다.

그러나 여전히 html에 css와 js가 들러붙어야 하는 것은 이 언어들의 태생적인 이슈이기에 "구조"면에서는 크게 개선된 부분이 없다고 할텐데요.

컴포넌트 안에 state가 jsx가 혼연일체가 되어 있거나, 중첩이 10회 이상 돌파하여 저 오른쪽 멀찍이 가버린 경우는 흔한 일이죠.

얼마전 이에 대한 한 가지 아이디어가 생겨 아래와 같은 코드를 한번 구성해 보았습니다.

"구조 " 컴포넌트를 만들면 "구조"와 "표현"과 "기능"의 관심사를 분리하고 코드를 계층화시킬 수 있을까...

하는 호기심에서 말이죠.

https://velog.io/@croishz/%EA%B5%AC%EC%A1%B0%EB%A7%8C%EC%9D%84-%EB%A7%A1%EB%8A%94-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0