RN) Next.js 하던 내가 RN 처음 붙잡고 느낀 점 및 초보자 에뮬레이터 실행

 React니까 금방 될 줄 알았는데

솔직히 처음엔 이렇게 생각했다.

 

"React는 React니까, Next.js 하던 감각이면 금방 되겠지?"

 

근데 막상 RN 코드를 열어보니까, 엥? 진짜 웹이랑 결이 다르다.

페이지가 아니라 화면(screen) 중심으로 생각해야 하고, HTML 태그도 없고, CSS도 알던 방식이 아니었다.

 

그래도 완전 새로운 세계는 아니었다.

React의 상태 관리, 컴포넌트 분리, 이벤트 처리 같은 큰 뼈대는 익숙했다.

약간 같은 언어를 쓰지만 사투리가 다른 동네 느낌이었다.

---

엥? 진짜? 하면서 놀란 포인트

가장 놀랐던 건 이거였다.

 

웹에서는 <div>, <p>, <button>으로 쭉 짜는데,

RN에서는 <View>, <Text>, <Pressable>을 쓴다.

 

처음엔 이름만 바꾼 거 아냐? 싶었는데, 해보니까 생각보다 중요했다.

특히 텍스트는 반드시 <Text> 안에 있어야 해서, 웹처럼 아무 데나 문자열 넣으면 바로 에러가 난다.

 

오… 이거 좀 충격이었다.

 

그리고 스타일도 재미있었다.

이번에 nativewind를 붙여서 className으로 작성하고 있는데,

이게 웹 Tailwind를 그대로 쓰는 게 아니라 RN 스타일로 변환해 주는 방식이라고 이해했다.

 

즉, 문법은 익숙한데 동작 기반은 네이티브라는 점이 포인트였다.

---

내가 이해한 RN 작성 감각

내가 지금 이해한 RN 작성 흐름은 대충 이렇다.

 

- 공통 UI는 /src에서 작성하고 iOS/Android가 같이 사용한다

- 필요할 때만 /.ios.tsx, /.android.tsx로 플랫폼 분기한다

- 레이아웃은 거의 Flexbox 기반으로 생각하면 편하다 (flex 안 써도 된다 ㅎ)

- 긴 리스트는 FlatList를 우선 고려한다

- 화면 이동은 스택 내비게이션으로 쌓고(pop/push) 빼는 개념이다

 

웹으로 비유하면

- Next.js의 페이지 라우팅 감각

- RN에서는 브라우저 히스토리 대신 앱 화면 카드 스택을 관리한다고 보면 좀 이해가 빨랐다.

---

걱정되는 지점, 그리고 재밌는 지점

걱정되는 부분은, 코드가 같아도 iOS/Android가 완전히 똑같이 보이진 않는다는 점이다.

폰트 렌더링, 헤더 스타일, 터치 피드백 같은 플랫폼 기본 차이가 남는다.

 

처음엔 한 번 만들면 똑같겠지라고 생각했는데, 실제로는 공통 코드를 유지하면서 최소 분기/미세조정이 현실적인 전략 같았다.

 

흥미로운 부분은 구조 설계였다.

이번에 /features/home/ui, /features/home/actions처럼 UI와 액션을 나눠보니, 생각보다 읽기가 좋아졌다.

 

보여주는 코드(ui)와 행동시키는 코드(action)가 분리되니까, 처음 보는 파일도 어디를 봐야 할지 감이 빨리 왔다.

---

에뮬레이터 실행, 초보자 기준으로 제일 쉬운 순서

나도 여기서 좀 헤맸다.  

그래서 일단 이 순서대로만 하면 된다.

1) Metro 서버 먼저 켜기

프로젝트 루트에서

npm start

Metro는 RN 번들러라서, 이게 켜져 있어야 앱이 코드 받아서 실행된다.

 

2) Android 에뮬레이터 실행

새 터미널 열고

npm run android

만약 에뮬레이터가 안 뜨면 Android Studio에서 기기(AVD)를 먼저 켜고 다시 실행하면 된다.

3) iOS 시뮬레이터 실행

새 터미널 열고

bundle exec pod install

npm run ios

 

처음 한 번은 Pod 설치가 필요하고, Xcode 관련 초기 설정이 안 되어 있으면 여기서 막힐 수 있다.

 

4) iOS에서 자주 막히는 포인트

- Xcode 라이선스 미동의

sudo xcodebuild -license

 

- Xcode 첫 실행 초기화 필요

xcodebuild -runFirstLaunch

 

- 시뮬레이터 런타임 미설치(플랫폼 없음)

xcodebuild -downloadPlatform iOS

 

이 세 개는 프로젝트 문제라기보다 개발 환경 세팅 문제에 가까웠다.  

나도 실제로 여기서 막혀서, 환경부터 맞춘 다음에 앱이 실행됐다.

 

5) 캐시가 꼬였을 때

Metro 캐시 초기화

npm start -- --reset-cache

 

---

지금 시점에서의 결론

RN은 웹 React를 하던 사람이 진입하기 좋은데, 앱 관점으로 사고를 전환해야 하는 기술 같았다.

처음엔 낯설지만, 한 번 구조를 잡고 나면 오히려 단순해지는 부분도 있었다.

 

지금 단계에서

- 공통 컴포넌트 패턴 만들기

- 스택 네비게이션 실제 화면에 붙여보기

- iOS/Android 차이 포인트 체크리스트 만들기

 

이 세 가지를 다음 학습 포인트로 잡아볼 생각이다.

 

앞으로 더 해보면서, 어디서 자주 막히는지랑 어떻게 풀었는지 계속 정리해 봐야겠다.