리액트 네이티브 - 프론트엔드 아키텍처 요소

컴포넌트 (Component)

UI를 구성하는 최소 단위이며, HTML, CSS, JS가 결합된 재사용 가능한 블록

화면의 버튼, 입력창, 카드 등이 각각 컴포넌트가 될 수 있음

 

- 종류

Functional Component (함수형 방식. 요즘 대부분의 방식)

Class Component (클래스 기반. 옛날 방식이지만 아직도 존재함)

 

- 역할

UI 조각을 만들어 재사용성을 높임

상위 컴포넌트에서 props를 받아 동작

 

 

 

 

훅 (Hook)

함수형 컴포넌트에서 상태나 생명주기를 다룰 수 있도록 하는 기능

 

- 대표적인 훅들

useState (상태 관리)

useEffect (사이드 리펙트, 라이프 사이클)

useRef (DOM 참조, 값 유지)

useContext (전역 상태 공유)

useMemo, useCallback (성능 최적화)

 

 

 

아톰 (Atomic Design 기준)

디자인 시스템의 가장 작은 단위

텍스트, 버튼, 라벨 등 HTML 태그 하나 or 아주 단순한 단위로 구성

 

- 역할

기본 요소를 캡슐화해서 디자인 일관성 유지

일반적으로 atoms/ 디렉터리에 저장함

 

 

 

몰레큘 (Molecule)

아톰 여러 개를 조합해 조금 더 복잡한 구성요소를 만듦

ex) Input + Label + ErrorMessage > 하나의 폼 필드

 

 

 

오거니즘 (Organism)

여러 컴포넌트를 조합한 고차 UI 컴포넌트

ex) 헤더, 카드 리스트, 네비게이션 바 등

 

 

 

페이지 (Page)

실제 라우터에 연결되어 사용자에게 보여지는 하나의 화면

 

 

 

템플릿 (Template)

여러 페이지의 레이아웃이나 구조를 담당

상단 네비, 사이드바, 푸터 등이 공통으로 존재하는 구조

 

 

커스텀 훅

useXXX로 시작하는 직접 만든 훅

공통된 로직 (fetch, form 처리 등)을 재사용 가능하게 함

 

 

 

폴더 구조 예시

src/
├── atoms/              # 작은 단위 UI (Button, Input 등)
├── molecules/          # InputField, Card 등
├── organisms/          # Header, Footer, List 등
├── pages/              # Home, Profile 등
├── hooks/              # Custom Hook
├── components/         # 복합적인 구성 요소
├── navigation/         # React Navigation 설정 (리액트 네이티브)
├── constants/          # 상수 (색상, 사이즈 등)
├── utils/              # 유틸 함수
├── assets/             # 이미지, 폰트 등
├── style/              # 공통 스타일
├── providers/          # context provider 모음