구조만을 맡는 컴포넌트 만들기
velog.io
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
다음 내용이 궁금하다면?
이미 회원이신가요?
2024년 7월 22일 오전 3:00
댓글 0
함께 읽은 게시물
👋 LLM 활용에 도움이 되는 가이드 모음
✅️Prompting Guide 101 by Google : https://lnkd.in/d8UwPWeN
... 더 보기IT 회사의 업무에서, 지금까지는 디자이너와 특히 개발자가 병목이었는데, 대 AI 시대에는 기획자가 병목이 될 수도 있겠다. 조금이라도 규모가 있는 기업에서의 가장 큰 병목은 보통 의사결정자라는 것을 생각해보면 그렇다.
즉, 실무보다 의사결정을 AI에게 맡기는 것이 병목을 해소할 수 있는 가장 확실한 방법이며, 그러므로 부장님과 사장님을 AI로 대체하는 것이야말로 인류의 번영을 위한 가장 빠른 지름길이다. (아님. 아니 맞나?!)
“To jobs that pay the rent! 집세 내주는 직장을 위해!” 영화 <악마는 프라다를 입는다>에 나온 대사다. 저널리스트를 꿈꾸는 대학 졸업생인 주인공. 하지만 그녀는 당장 생계를 위한 일자리가 급하다.
... 더 보기
Next.js 프로젝트를 AWS EKS에 배포하며 배운 것들
최
... 더 보기AI(LLM) 애플리케이션의 발전 속도가 AI 지능(능력)의 발전 속도를 따라가지 못하고 있는 상태가 되었다. 즉, 이제 AI가 부족한 것이 문제가 아니라, AI의 능력을 100% 활용하지 못하고 있는 것이 문제인 상태가 되었다는 이야기.
직장생활은 결국 윗사람과 아랫사람이 나뉠 수밖에 없다. 기업들이 아무리 평등한 관계를 추구한다고 해도, 고용인과 피고용인의 관계마저 사라지는 것은 아니다. 아무리 평등하다 해도 월급 주는 사장님이 을이 될 수는 없지 않은가? 아무리 작은 조직이라도 일을 맡기는 사람과 일을 하는 사람이 존재한다.
... 더 보기
