[React] React Component, Atomic Design

React Component

• Component
  • 속성(Props)을 받고 상태(state)/메소드를 가진다.
  • 반복되는 UI 단위
  • 가능한 순수함수로 실행되도록 작성하고 데이터 영역과 UI를 분리
  • MyComponent.defaultProps = {…}
• Class Component
  • extends React.Component 또는 createClass
  • constuctor, this.state, render(), …
  • LifeCycle 관리가 쉽다
• Functional Component
  • react 16.8부터 사용, 직관적이고 가볍다.
  • render 필요 없고 JSX return;
• React Component Props
  • Props
    • props, children (React.Node)
    • 속성(변수, 함수 등) 전달
    • MyComponent.defaultProps = {…}
• Component Props, States, Variables
  • Variables / Functions
    • 변경된다고 해서 re-rendering 영향 없음
    • 값은 바뀌지만 화면(view)에는 영향 없음
  • Props
    • read-only in receiver
    • 랜더링 될 때 한번만 설정된다. (랜더링 후에 변경X)
  • States
    • 상태변경은 무조건 setState 사용
    • 부모 상태 변경 시 참조하는 모든 자식 컴포넌트 re-render
  • Component
    • 함수형 컴포넌트 == 순수 함수형 컴포넌트
    • Container Component를 적절히 사용
    • 상태 공유 단위로 분리 (useContext)
    • 최대한 독립적으로 작성
    • coupling을 최소화하여 단독으로 사용 가능하도록 작성

 

Atomic Design

• Atoms
  • UI의 최소 단위
  • Input, Button 등
• Molecules
  • 한 개 이상의 Atoms를 구성하여 단일한 역할 수행
  • LoginForm, SearchForm 등
• Organisms
  • 한 개 이상의 Molecules
  • Presentation 및 Container Components의 조합
  • NavBar(Nav + SearchForm), Header 등
• Templates
  • Organisms를 조합하여 만든 화면 레이아웃(CSS)
• Pages
  • Templates에 Data를 포함하여 완성된 최상위 컴포넌트
• Component Oriented Develoment
  • Page 단위 디자인의 한계를 극복하기 위해 출현
  • 디자인을 5개의 계층으로 정의
  • 코드 재사용성, 가독성, 분업, 테스트 용이
  • 설계의 기준(단위) 설정 용이, 계층적
• Presentation Component
  • 전달된 Props로 형태, 모양을 구현
  • 상태 특별히 없고 API 호출도 없다.
• Container Component
  • 디자인보다 로직에 집중
  • Hooks와 API 호출
  • 주로 Presentation Components를 반환하거나 포함한다.