좋은 코드 만들기

개요

구글이 Material Design이라 불리는 디자인 가이드 라인을 공개 한 후 디자인을 언어화 하여 그 법칙성을 시스템으로 운용하는 접근법이 널리 퍼지게 되었다. React의 특징중 하나인 Component 기반도 이에 반영된 것이다. 디자인에도 설계 계념을 도입해서 확장성과 유연성이 높은 UI를 만들어 보자

*참고
(material design)https://brunch.co.kr/@bigpic/5

아토믹 디자인의 기본 계념

예전부터 주로 웹 사이트 디자인을 만들때 페이지 단위로 만드는 mock-up(실물 모형)방식이 많았다. 하지만 아토믹 디자인에서는 틀(page)와 부품(component) 2가지 수준으로 나누어 UI를 파악하는 것이 기본적인 계념이다. 쉽게 말해 컴포넌트를 조합해서 다양한 인터페이스나 템플릿을 구축하는 것인데, 컴포넌트를 이용한다는건 다시 사용한다는 장점이 있다.
페이지와 컴포넌트를 분할하는 단위는 5종류 인데,

• Atom 원자
• Molecules 분자
• Organisms 유기체
• Templates 템플릿
• Pages 페이지

5 가지 종류는 각가 서로 다른 특징들을 가진다.