Kako arhitekturirati React Native aplikaciju?

Question

IT Interview Practice · Accepted Answer

Arhitekturiranje React Native aplikacije zahtijeva **organiziranje koda**, **odvajanje odgovornosti** (UI, logika, podatci), izbor **upravljanja stanjem**, i strukturiranje za **održivost, testabilnost i skalabilnost**. Dobra arhitektura je važna kako aplikacije rastu.

## Organizacija projekta

```text
Organize code by FEATURE or by TYPE (feature-based scales better for large apps):
  src/features/auth/{components, screens, hooks, api, store}/   (feature-based)
  OR src/{components, screens, hooks, services, store, navigation, utils}/  (type-based)
→ Keep related code together; separate reusable from feature-specific code.
```

## Odvajanje odgovornosti (slojevi)

```text
PRESENTATION → components/screens (UI, display, user interaction) — keep "dumb" where possible
LOGIC → hooks, state management, business logic (separate from UI)
DATA → API services / repositories (abstract data access); server state via React Query
→ Components display; hooks/state hold logic; services handle data → testable, maintainable.
```

## Ključne arhitekturne odluke

```text
✓ STATE MANAGEMENT → local (useState), Context, or a library (Redux Toolkit/Zustand) by
  complexity; React Query for SERVER state (separate from client state)
✓ CUSTOM HOOKS → extract reusable logic (useAuth, useFetch) — a key RN/React pattern
✓ COMPONENT structure → small, reusable, composable components; presentational vs container
✓ NAVIGATION structure (React Navigation); TYPED with TypeScript
✓ Abstract API/data access (services/repositories) — swappable, testable
```

## Principi

```text
✓ Separation of concerns; testability; reusability (components + hooks)
✓ Keep components focused; logic in hooks/services (not bloated components)
✓ Don't over-engineer small apps; scale architecture to complexity
```

## Zašto je to važno

Razumijevanje arhitekturiranja React Native aplikacije je važno znanje na seniorskoj razini jer **dobra arhitektura je bitna za izgradnju održivih, testabilnih i skalabilnih aplikacija** kako rastu, pa je vrijedna za ozbiljni React Native razvoj.

Kako aplikacije rastu izvan jednostavnih primjera, loša arhitektura (logika nakupljena u komponentama, bez odvajanja) čini ih teško održivima, testabilnim i proširivima — čineći arhitekturno mišljenje važnim.

Razumijevanje **organizacije projekta** (po funkcionalnosti za veće aplikacije, držanje povezanog koda zajedno, odvajanje ponovno iskoristivog od koda specifičnog za funkcionalnost) pruža strukturu koja se skalira.

Razumijevanje **odvajanja odgovornosti** (komponente za prezentaciju za UI, hooks/stanje za logiku, usluge/repozitoriji za podatke — čuvanje komponenti "glupim" i logike odvojenom) je temeljno za održiv, testabilan kod.

Razumijevanje **ključnih arhitekturnih odluka** — izbor upravljanja stanjem prema složenosti (lokalno, Context, Redux Toolkit/Zustand) sa **React Query za stanje servera** (važna razlika između klijentskog/serverskog stanja), korištenje **custom hooks** za izvlačenje ponovno iskoristive logike (ključna React Native/React paradigma koja čuva komponente čistima i logiku ponovno iskoristivom), strukturiranje komponenti (male, ponovno iskoristive, sastavne), tipizirana navigacija, i apstrakcija pristupa podacima — odražava odluke koje oblikuju dobro arhitekturiranu aplikaciju.

Razumijevanje **principa** (odvajanje odgovornosti, testabilnost, ponovno iskoristivost putem komponenti i hooks, čuvanje komponenti fokusiranima sa logikom u hooks/uslugama, i ne over-engineering male aplikacije) odražava zrelo arhitekturno razmatranje prilagođeno složenosti aplikacije.

Budući da je dobra arhitektura bitna za održive, testabilne, skalabilne React Native aplikacije kako rastu (sa lošom arhitekturom uzrokujućom stvarne probleme), i budući da razumijevanje organizacije koda, odvajanja odgovornosti, custom hooks, odluka oko upravljanja stanjem, i arhitekturnih principa omogućava izgradnju dobro strukturiranih aplikacija, razumijevanje arhitekturiranja React Native aplikacije je važno znanje na seniorskoj razini za ozbiljni React Native razvoj — ključna kompetencija za izgradnju održivih, skalabilnih aplikacija koja razlikuje profesionalni razvoj, odražavajući arhitekturno mišljenje očekivano za senior uloge.

Organizacija projekta

Odvajanje odgovornosti (slojevi)

Ključne arhitekturne odluke

Principi

Zašto je to važno

Povezana pitanja