리액트 네이티브 #2_ Component & Style

안녕하세요. 문범우입니다.

지난 포스팅에서 리액트 네이티브를 사용하기위해 기본적인 개발환경 구성을 진행하였습니다.

이번 포스팅에서는, 바로 개발을 진행하기전에 리액트 네이티브에 관한 기본적인 이론들을 간단히 살펴보도록 하겠습니다.

---

1. Component

위 코드는, 우리가 나중에 실제로 개발을 시작했을 때 처음에 세팅되는 코드입니다. 위의 코드를 통해 알 수 있는 점은 화면을 보여주는데 있어서 react나 기타 웹에서와 같이 div등과 같은 컴포넌트가 존재하지 않고, 특별하게 View, Text 와 같은 컴포넌트가 존재하는 것입니다.

다시말해, 우리는 react native에서 사용할 수 있는 컴포넌트들이 한정되어 있습니다.

컴포넌트들에 대해 더 자세한 내용은 아래의 react native 공식 홈페이지에서 확인할 수 있습니다.

https://facebook.github.io/react-native/

코드를 조금 더 자세히 확인해보면, 우리는 react native라는 것을 통해 Stylesheet, View, Text 라는 컴포넌트를 불러온 것을 알 수 있습니다.

이와 같이 리액트 네이티브에서 특정 컴포넌트를 사용하려면 이를 불러와서 사용해야 합니다.

이러한 리액트 네이티브의 컴포넌트는 각 모바일 환경에 맞춰서 자동적으로 변환됩니다.

즉, iOS같은 경우에는 object-c, 안드로이드같은 경우에는 java로 각각의 컴포넌트들이 네이티브하게 변환됩니다.

이러한 이유 때문에 우리는 이러한 컴포넌트들을 이용하는 것입니다.

2. style

그리고 14번 부터의 코드를 확인해보면 styles라는 객체를 만드는 것을 볼 수 있습니다. StyleSheet.create()에 대한 것은 추후에 배워볼 것인데, 무엇보다 주목되는 것은 flex가 적용되는 모습입니다.

우리가 이전에 iOS 모바일 앱을 개발하기 위해서 swift를 사용하거나, 안드로이드 모바일 앱을 만들기 위해서 안드로이드 스튜디오를 사용할 때 실제로 flex를 적용시키기 위해서는 매우 복잡해질 수 있습니다.

레이아웃을 잡기 위해 웹 등에서 매우 편하게 사용하는 flex를, 이제 리액트 네이티브를 통해 모바일 어플리케이션에서도 사용할 수 있게된 것입니다.

그리고 이렇게 우리가 설정한 스타일을 7번 줄에서 확인할 수 있듯이 매우 간단하게 적용시킬수 있습니다.

또한 아직은 직접 와닿지 않지만 추후에 직접 개발을 하다보면 리액트 네이티브가 매우 엄격하고, 까다롭다라는 점을 느낄 수 있습니다.

다시 말해서, 사소한 오타나 실수에 의해서도 오류가 발생하고 어플리케이션이 제대로 작동하지 않습니다.

우리가 웹프로그래밍을 할때는 사소한 오타 등은 단순히 적용되지 않을뿐이지 큰 오류를 발생시키지는 않았습니다.

하지만 리액트 네이티브에서는 매우 사소한 것들 또한 엄격하게 잡아내는데, 다르게 살펴봤을 때 오히려 이러한 것이 개발자들에게는 매우 편하게 작용될 수 있습니다.

---

이렇게 리액트 네이티브에 관해 매우 간단한 것들에 대해서 알아보았습니다.

실제로 레이아웃을 잡는 것은 모바일 어플리케이션에서 매우 중요한 일이기도 하기에 저희가 다음 포스팅부터는 실제로 개발을 시작하고, 먼저 Flexbox에 대해서 알아보도록 하겠습니다.