[컨테이너/프렌젠테이셔널&HOC] 아키텍처 패턴 React Todo 앱

React 아키텍처 패턴의 종류

• 단일 컴포넌트 패턴 (별로)
  • 하나의 컴포넌트가 UI의 모든 부분을 담당
  • 작은 규모의 애플리케이션에 적합
• 컨테이너/프레젠테이셔널 패턴 (Top 1)
  • 컴포넌트를 로직 처리용과 UI 표시용으로 분리
  • 코드 재사용성과 유지보수성 향상
• HOC(Higher-Order Component) 패턴 (Top 2)
  • 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환
  • 컴포넌트 로직 재사용에 유용
• Flux 아키텍처
  • 단방향 데이터 흐름을 따르는 상태 관리 패턴
  • 데이터의 예측 가능성 향상
• 모듈형 아키텍처
  • 코드를 독립적인 모듈 단위로 분리
  • 재사용성, 유지소수성, 확장성 증대
• FSD(Feature Sliced Design) 아키텍처 (새롭게 등장한)
  • 기능 중심의 계층적 구조
  • 대규모 프로젝트와 팀 협업에 적합

가장 많이 사용하는 컨테이너/프레젠테이셔널 패턴 와 **HOC(Higher-Order Component) 패턴 **을 실습해보았다.

컨테이너/프레젠테이셔널 패턴

로직 처리와 UI 표시를 구분하여 처리!

• components: UI 표시
• containers: 로직 처리

전체 프로젝트 구조

src/
  **components/
    AppContent.jsx
    AppContent.css
  containers/
    AppContainer.jsx**
  ThemeContext.jsx
  useLocalStorage.jsx
  App.jsx

• 기존 AppContent의 내용을 AppContent와 AppContainer로 분리
• css도 components로 이동

⇒ 코드가 짧아져서 보기가 편하고 개발에도 편리

코드

GitHub - KimGyeongLock/todo_react at 983b39904a481516b163d14c3c0efa3e1493b804

HOC(Higher-Order Component) 패턴

HOC 패턴은 공통된 로직을 추출하여 여러 컴포넌트에 적용해 재사용성을 높인다.

1. useLocalStorage 훅 → HOC : 로컬 스토리지 관련 로직 분리 ⇒ withLocalStorage
2. useTheme 훅 → HOC : 테마 관련 로직 분리 ⇒ withTheme

전체 프로젝트 구조

src/
  components/
    AppContent.jsx
    AppContent.css
  containers/
    AppContainer.jsx
  **hoc/
	  withLocalStorage.jsx
	  withTheme.jsx**
  ThemeContext.jsx
  useLocalStorage.jsx
  App.jsx

⇒ 현재 프로젝트에서는 공통으로 쓰이는 컴포넌트가 없어 필요성을 못 느낌. 오히려 더 장황해진 느낌

코드

https://github.com/KimGyeongLock/todo_react

실수

• 인수가 필요 없는 함수: onClick={handleClick}처럼 함수 이름만 지정할 수 있습니다.
• 인수가 필요한 함수: onClick={() => handleDelete(index)}처럼 화살표 함수를 사용하여 인수를 전달해야 합니다.

IF onClick={handleDelete(index)} 이렇게 해버린다?

이 코드는 handleDelete 함수가 즉시 실행되어 결과를 onClick 속성에 할당합니다. 이 방식은 다음과 같은 문제를 발생시킵니다.

• 즉시 호출: 컴포넌트가 렌더링될 때 handleDelete 함수가 즉시 실행됩니다.
• 인수 전달 불가: handleDelete가 반환하는 값을 onClick 속성에 할당합니다.