RN은 react가 아닌 것 같다

RN을 공부한지 한 달이 흘렀다.. 처음 RN을 시작했을 때는 react와 차이를 거의 느끼지 않았다. 코드가 비슷하게 생기기도 했고, UI를 구성하거나, hook을 사용하거나, 상태관리 하는 부분이 비슷하다고 느껴 '훗, 별거 없군'을 느꼈다.

하지만 이는 사망 플래그를 의미했다.

일단 navigator

react를 사용할 때, router의 개념과 비슷하겠지라 생각했다. 일단 화면을 만들기 위해 자세한 내용을 보지 않고, 공식문서에 나와 있는 가이드를 따라하면서, 기존에 만들어진 코드를 가지고 내가 할 화면을 만들었다.

하지만 앱 환경은 웹 환경과 완전 달랐다. 그때가 되어서 왜 stack이라고 하는지...

자바스크립트 코드가 읽히는 과정을 생각해보면 RN의 Stack screen이 조금은 이해가 됐다.

Stack.Navigator 안에 Stack.Screen들이 쌓이는 원리를 컨텍스트를 통해 이해했다.

실행컨텍스트에 쌓인 함수 하나가 있을 때, 내부 코드를 읽으면서 함수를 만나면 (사실 함수가 아니라, 객체에 함수 프로퍼티가 존재하는 코드..!) 새로운 실행 컨텍스트 환경을 만들어서 해당 코드가 끝나면 기존의 컨텍스트 환경으로 돌아간다.

Stack.Navigator가 읽히면 Stack.Screen으로 쌓여있는 컴포넌트가 출력이 되고, 다른 Stack.Navigator에 있는 경우 외부 Screen에 직접적으로 접근할 수 없는.. 그 원리를 알게되니 현재 하나의 스택에 다 넣어놓고 꺼내 쓰는 방식이 굉장히 별로임을 느끼게 되었다.

공식문서를 더 꼼꼼하게 보다 보니, 좋은 예시를 제공하고 있어 팀원들에게 해당 정보를 공유를 했다.

상황에 따른 Stack Navigator!

비즈니스 로직에 따르면 유저의 종류에 제공할 서비스가 다르기 때문에 Stack group을 활용해서 나눠주고 컴포넌트로 분리해서 return 하는 구조가 더 명확하다고 생각했다.

지금은 다 때려넣어! 그냥 때려넣고 슥삭 구조라서 이게 뭐지라는 생각을 정말 많이 했었다.

코드가 바뀌어 가는 모습을 보면 매우 행복하다.

이상한 navigator type

routerProp은 뭐고, StackProp은 뭐고, composite는 뭐고, 난해한 개념들이 있었지만 당장 나는 화면만 만들면 됐기에 넘어갔는데, 다시 보니 나는 아무렇게나 코드를 짜버렸다.

nest Navigator를 공부하니 위 개념들을 이해할 수 있었다. Tab화면을 만들 때 composite 타입을 정의해서 사용했는데 Tab에 중첩 화면을 만들어야하기 때문이었다..!

하지만 RN은 모든 것이 라이브러리다. 왜 넣어야 하며 라이브러리 없으면 아예 할 수 없는건지 아무도 알려주지 않는다..

하지만 공식문서를 읽다보면 navigate 타입을 이런식으로 해주세요 라고 알려줘서 고개를 끄덕이며 진행할 수 있었다.

확실하게 앱이 동작하는 원리를 이해하려면 RN이 아니라 네이티브를 공부해야겠다는 생각이 들었다. (웹도 하고 싶고 앱도 하고 싶은..욕심..)

reanimated에 벽을 느껴버렸다

라이브러리 이름을 봤을 때는 단순하게 부드러운 애니메이션을 제공하는 framer와 비슷한 라이브러리인가? 생각했지만 react 특유의 상태 관리와 패턴과 다른 방식을 마주쳤다. UI를 위해서 다른 스레드를 사용한다는데 이해하기 매우 어려웠다.

제스처에 따른 다양한 상태 변화를 어떻게 표현해야 하는지 알기 위해 공식문서를 다 쭉 읽어봐도 하고자 하는 부분을 찾을 수 없었다..

검색 실력이 부족해서일까. 이해력이 부족했을까 아무튼 나는 하고자 하는 부분을 이해할 수 없었다..!

그래서 reanimated를 사용해서 만든 라이브러리를 찾아보면서 코드를 파기 시작했다..ㅠ

봐도 모르겠다.

무엇을 모르는지 물어봐도 답하기 힘들 정도로 모르겠다.

과제테스트로 사용했던 라이브러리라서 제출 시간이 지났지만 더 만들어보려고 한다...

만족스런 코드를 짜고 싶었지만, 무능력함을 느껴버리고 더 열심히 공부를 해야겠다는 다짐을 할 수 있는 기회였다..

하지만 좋았던 점은 라이브러리를 분석해본 경험은 좋았다!

유명한 라이브러리들은 코드 굇수들이 많기 때문에 구조를 설계하는데 고민을 할 수 있는 기회를 줬다.

화면 하나를 개발하는 것이 아니라 구조 전체를 설계하고 개발하는... 아키텍쳐를 고민할 수 있는 개발자가 되어봅시다!

결론

RN.. react와 형제가 아니다. 앱 개발이 하고 싶다면! 네이티브도 같이 해보자..!