[Tech Article] 리액트 어플리케이션 구조 - 아토믹 디자인

리액트 어플리케이션 구조 - 아토믹 디자인

---

• 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념이며
  일관된 UI를 만들고 유지보수성을 향상시켜줌!

1. 리액트에서의 컴포넌트

• 리액트의 가장 흥미로운 개념 중 하나는 컴포넌트 기반의 프로그래밍
• 리액트는 프런트엔드 개발을 위해 설계 우선 접근법을 권장.
  • UI/UX 팀은 개발자들이 구현할 수 있는 목업을 만들 것이며(mocking),
    개발자들은 이를 이용해 UI를 컴포넌트 계층으로 세분화 할 수 있음.
  • 계층 구조를 기반으로 컴포넌트들을 작성하는 것은 아토믹 디자인에서 중요한 기초 작업임.
    • 원자, 분자, 유기체, 템플릿, 페이지의 개념은 이 계층 구조를 형성하는 데 도움이 됨!

2. 아토믹 디자인??

• 아토믹 디자인은 5가지의 요소로 분리되어 있으며 효과적인 인터페이스 시스템.
  • 원자(Atoms): 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트
    • 원자는 모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소
  • 분자(Molecules): 분자는 2개 이상의 원자로 구성되어 있으며, 하나의 단위로 함께 동작하는 UI 컴포넌트들의 단순한 그룹
    • 예를 들어 HTML 텍스트 입력 필드, 레이블, 오류 메세지 또는 HTML 텍스트 입력 필드와 버튼으로 구성된 검색 컴포넌트가 있음!
  • 유기체(Organisms): 유기체는 분자, 원자 또는 다른 유기체의 그룹으로 구성된 비교적 복잡한 그룹.
    이 유기체들은 인터페이스의 개별적인 영역을 형성
  • 템플릿(Templates): 컴포넌트들을 배치하고 설계의 구조를 보여줌
    • 페이지의 실제 컴포넌트가 없을 경우, 페이지가 어떻게 보일지에 대한 골격 구조
  • 페이지(Pages): 실제 컨텐츠들을 배치한 UI를 보여주며, 템플릿의 구체화된 인스턴스

    템플릿과 페이지는 유기체, 분자, 원자를 포함하고 있다.
    이러한 작은 구성 요소들의 결합은 어플리케이션에서 사용자 인터페이스를 구성

3. 장점 / 단점

• 장점
  • 어플리케이션과 분리하여 컴포넌트를 개발하고 테스트할 수 있으며, 스타일 가이드와 같은 도구에서 볼 수 있음.
    그리고 통합 개발을 할 때, 백엔드 어플리케이션의 로직에 의존하지 않는다는 장점
  • 일련의 패턴이 확립되면, 설계 변경이 필요한 경우에 대비하여 더 빠르고 유연성 있는 빌드 프로세스를 가질 수 있음
  • 기존의 컴포넌트들을 재사용하고 있기 때문에 디자인을 일관성 있게 통일할 수 있음
  • 컴포넌트에 CSS가 강하게 결합되어 있기 때문에 CSS를 훨씬 잘 관리할 수 있음.
    이를 위해서는 어플리케이션의 구조에 따라 컴포넌트에서 사용되는 CSS만 렌더링하도록 해야함!
• 단점
  • 컴포넌트가 분리되어 있고 상위 컨테이너 컴포넌트의 사이즈를 결정할 수 없을 경우, 미디어쿼리를 사용하기 어려움
    • 컴포넌트는 너비에 대해 알 수 없기 때문에 실제 페이지의 사이즈가 변경될 때 크기가 조정됨
    • 이 문제는 크기를 조정할 수 있는 flex, grid 와 같은 CSS 속성을 구현한 레이아웃 컴포넌트를 도입하여
      해결 할 수 있음!

4. 참고사항

• 단일 프로젝트에서 폴더의 중첩은 최대 3개 또는 4개로 제한할 것을 권장

느낀점

• 어떻게보면 되게 복잡하지만, 나중에 유지보수에는 용이할 것 같다!
  이제 얼마 안남은 학원에서는 아토믹 디자인 패턴을 적용할 수 있을 지 모르지만
  나중에 혼자할 때 한번 적용해봐야지!

참고 링크

• TOAST UI - 리액트 어플리케이션 구조 - 아토믹 디자인