[React Native] 리액트 네이티브에서 "position: 'absolute'" 적용하기

리액트 네이티브 코드에서는 컴포넌트가 가장 아래에 작성된 순서대로 렌더링한다. 무척 간단한 건데 몰라서 반나절 정도 헤맸기 때문에 적어둔다.

컴포넌트 위에 다른 컴포넌트를 올리고 싶다!

검색창을 풀스크린 지도의 상위 레이어로 겹쳐서 위치시키고 싶었는데, 아무리 부모 컴포넌트에 position: relative를 주고 자식인 검색창 컴포넌트에 position: absolute를 줘도 자꾸만 지도 레이어의 하위에 렌더링이 되어 보이질 않았다.

내가 뭔가 스타일을 잘못 쓰고 있다고 생각하고 한참을 이리저리 고쳐봤는데도 해결이 안 되어 찾아봤는데, 그냥 컴포넌트가 작성된 순서를 바꾸면 되는 거였다.

컴포넌트의 작성 순서를 바꾸자.

다음은 내가 처음 작성했던 코드를 대략적인 pseudo code 로 나타낸 것이다.
리액트 네이티브는 가장 마지막에 작성된 Map 컴포넌트를 Search 컴포넌트 위로 올렸고, 그래서 화면에 Search 컴포넌트가 안 보였던 것 같다.

const App: React.FC = () => {
	...
	return (
    	<Container style={{ position: 'relative' }}>
            <Search style={{ position: 'absolute' }} />
            <Map />
        </Container>
    );
}

이런 식으로 바꾸니 그제야 검색창이 원하는 대로 보였다.

const App: React.FC = () => {
	...
	return (
    	<Container style={{ position: 'relative' }}>
            <Map />
            <Search style={{ position: 'absolute' }} />
        </Container>
    );
}

후기

너무 기본적인 걸로 시간을 보낸 것 같아서 마음의 상처를 입었지만, 이렇게라도 알게 되었으니 절대 잊진 않을 것 같다. 전체 기능을 완성하는 과정은 [React Native] 리액트 네이티브에서 구글 지도 + 장소 검색 기능 구현하기에서 볼 수 있다.