리액트 네이티브에서 스택 자료구조가 사용되는 경우는 무엇인가?란 동료의 질문에 의문이 생겼다.

왜냐면 내가 생각했을때 자바스크립트 엔진 자체엔 콜스택도 있지만, 메모리 힙도 있기 때문이다. 그리고 경우에 따라 비동기 통신, 이벤트 핸들러를 동작했을때, 혹은 web api를 사용했을때 등엔 브라우저나 node.js에서 제공하는 이벤트 루프를 사용하여 태스크 큐에 있는 콜백함수를 처리하는 동작도 일어나기 때문에 스택 자료구조만을 사용한다고 단언할 수 없다고 생각했다.

그래서 아래와 같이 스택의 활용예시에서 스택을 사용하는 주체가 브라우저인지, 자바스크립트 엔진인지 궁금해졌다. window.history객체 자체가 웹 브라우저에서 지원하는 것이고, 해당 객체안에서 자바스크립트엔진을 제공한다. 그렇기 때문에 결론적으론 웹 브라우저가 주체가 돼서, window.history객체를 제공하고, 그 안의 자바스크립트엔진 메모리힙을 활용해서 이런 동작이 발생하는 것 같다.

그런데 여기까지 생각해본다음에 동료의 질문을 다시보니 리액트 네이티브이기 때문에 웹 브라우저 구동환경과는 관련이 없을 것 같았다. 아래 책에서 볼 수 있듯 리액트 네이티브 앱에서는 화면을 전환할 때 브라우저의 history와 비슷한 사용성을 제공하기 위해서 네이티브 스택 내비게이터를 사용한다고 되어있다.

그래서 관련된 자료를 찾아보니, 위 블로그에서 설명하듯이 리액트 네이티브 스택 내비게이터에서 제공하는 것들 중에 네이티브 스택 내비게이터를 사용하게 되면 스택을 사용해서 화면을 구성하게 된다. 소스코드 자체를 스택처럼 쌓아서 구성하는 부분이 흥미로웠다.

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import Home from '../screens/Home';
import List from '../screens/List';
import Item from '../screens/Item';

const Stack = createStackNavigator();

const StackNavigation = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name='Home' component={Home} />
            <Stack.Screen name='List' component={List} />
            <Stack.Screen name='Item' component={Item} />
        </Stack.Navigator>  
    );
};

export default StackNavigation;

/* src/navigations/Stack.js */

☑️ 참조

https://wooono.tistory.com/395