아토믹 디자인 입문기 #2

JellyChoco·2020년 7월 7일
0

1. Atoms 을 만드는게 가장 어렵다!

어려운점은

1). 디자인

추후에 하나의 Atom이나, 혹은 그 이상의 단계에서도 디자인이 충분히 수정될수도 있기에 (size,color 등) 상위 단계에서도 충분히 쉽게 바꾸도록 만들어야 한다.

그러던 와중 오늘 처음 알게된 것이 Styled.component 이다.

처음엔 그냥 CSS 파일을 만들어서 하면 되겠지! 했는데
생각해보니, 하나의 부품처럼 쉽게 쉽게 사용해야 하는데
CSS파일을 사용하려면 고유 ID 혹은 CLASS 를 부여해주어야 하는데,

왠지 나중에 구조가 복잡해지다 보면 SPA 문제를 일으킬것 같아서(확실하지 않습니다)
처음엔 객체형태로 CSS를 부여해주었는데(style={objForStyle}), 한계를 느끼곤 방법을 찾다가 결국 찾게 된것이 스타일드 컴포넌트다.
왜냐하면 CSS파일도 만들 필요가 없고, 그냥 해당 컴포넌트에서 스타일된 컴포넌트를 만들어서
적용시켜 버리기 때문에 왠지 괜찮을 것 같았다.
하지만 글을 쓰는와중에 갑자기 .. 스타일드컴포넌트의 해당 변수명이 겹치면 어떻게 될지..
걱정이 되기 시작했다.. (지금은 맥주마시면서 글을 쓰고 있으므로 내일 확인 해봐야겠다.)
그래도 일단은 아토믹 디자인에 대한 검색글에서 스타일드컴포넌트를 사용한다고 나와있으니..
별일 없겠지 싶다.
==> 이 부분은 보니까 클래스명이 암호화 되어서 겹칠일은 없을것 같다.

2). 재사용성

Atom단계에서 최대한 자체적인 기능을 배제시키고,
한마디로 혼자선 아무것도 못하는 애로 설계해야 된다.
사실 오늘도 아토믹 디자인을 사용해서 개인 포트폴리오를 만들고 있었는데
Molecules 단계가 뭔지 모르겠다.
atom을 만들고 바로 organisms 에서 합쳐버렸다.

아토믹디자인은 아톰상태가 가장 중요하고, 후엔 재사용성을 고려하지 않아도 된다고
어디서 본것 같아서.. 일단은 그렇게 진행했고 포트폴리오 제출 전에 리팩토링을 할 예정이다.

느낀점

아토믹 디자인을 사용하면서 리액트의 본질적인 기능과 존재의 이유에 대해서
이제서야 알것 같았다
재사용성을 극한으로 추구하는 아토믹 디자인과 리액트는 상당히 잘 맞는것 같다.
리액트를 배운지 오래되진 않았지만
이제서야 알아가는 느낌이다.
리액트 입문자에게 아토믹디자인을 꼭 추천하고 싶다.

profile
코린이? 개린이!

0개의 댓글