펀딩-사이드 프로젝트(auction) 폴더 구조 설계

React - 리액트 설계구조

• 확장성 있고, 재사용성 있는 코드를 만들어야 한다.
• 컴포넌트에 대한 구조 이해가 있어야 한다.(React는 무수한 컴포넌트로 이뤄져 있기 때문)
• 단일 책임을 갖고 있는 컴포넌트가 있어야 한다.

컴포넌트란?

• 리액트 컴포넌트는 단순하게 보면 props를 받아서 DOM 렌더를 시키는 JSX를 리턴하는 함수이다.
• 함수형 컴포넌트와, 클래스형 컴포넌트로 나뉜다.

함수형 컴포넌트란? 함수형 컴포넌트는 JavaScript 함수이기 때문에 함수 컴포넌트로 불린다. 함수 컴포넌트에서는 state, lifecycle method 기능을 지원해주지 않아서 변화가 없는 정적인 컴포넌트를 만들 때 사용함. ->> 리액트 16.8버전부터 React Hook 기능이 추가되어서 함수형 컴포넌트에서도 state 및 lifecycle Method를 사용할 수 있음.

클래스 컴포넌트란? 클래스 컴포넌트는 React.Component를 상속하여 만든다. state와 lifecycle method를 사용할 수 있어서 컴포넌트 스스로 상태를 관리 및 업데이트 하며 이를 렌더링해서 보여줄 수 있습니다.

1. 기능 별로 그룹화 시키기

• Atomic Design : 재사용이 가능 하도록 디자인 할 수 있는 시스템, Atomic design에서는 컴포넌트를 atoms, molecules, organisms, templates, pages로 나눈다.

  • 장점: 각각의 컴포넌트의 계층 구조를 판단하기도 쉽고 알아보는 것도 쉽다.
    체계적인 UI 설계가 가능하고, 협업할 때 유리하다.
    
  • 단점: 컴포넌트 간 의존성과 복잡도가 생각보다 까다로울 수 있다.

• Container, Presenter 패턴: Container는 자바스크립트의 기능부분, Presenter는 시각적으로 보이는 영역을 담당한다(UI). 한 페이지 컴포넌트를 기능별로 쪼갠 뒤 import / export 로 해당 function을 불러와서 연결해주면 된다. 이 때 import 하는 쪽이 부모, export 하는 쪽이 자식 컴포넌트가 된다. 리액트는 단방향 데이터 구조를 가지고 있기 때문에 함수나 변수를 부모 > 자식 방향으로만 전달해줄 수 있다. (props 사용)

  • 장점: 유지보수가 쉽다(자신의 역할이 명확하기 때문에 어떤 에러가 발생했을 시 어떤 컴포넌트 를 고쳐야하는 지 확인하기 쉽다.)
    성능이 좋아진다.(컴포넌트를 두개로만 나눠놓기 때문에 성능이 좋아진다.)
    
  • 단점: 코드양이 많아지면 원하는 코드 찾기가 어려울 수 있다.

느낀점: 펀딩-사이드프로젝트(auction)에서는 Container, Presenter 패턴을 사용하기로 결정했다. 이유는 auction 프로젝트는 대규모 프로젝트가 될거같지 않았고, Atomic Design 패턴을 사용하려면 규모가 큰 프로젝트에서 적합할거라는 생각이 들었기 때문이다. 추후에 대규모 프로젝트로 발전해 나아가면 팀원들과 협의 후 Atomic Design 패턴을 도입하여 사용하면 좋을 것 같다.