작은 시작점

리액트와 리액트 네이티브는 비슷한 듯 다르다.

핵심적으로 알아야할 컴포넌트들 비교하고 스타일링 적용하는 방법을 알아보자

<div>  VS  <View>

리액트의 <div></div>태그, 리액트 네이티브의 <View></View>태그의 용도는 같다.

하지만 주의해야할 점은

<div>안녕하세요</div>

div 태그 내 텍스트 안녕하세요 >> 가능

<View>안녕하세용</View>

View 태그 내 텍스트 안녕하세용 >> 불가능

View
콘텐츠를 담는 상자나 컨테이너 구축에 사용됨.
다른 컴포넌트들을 담을 순 있지만 단순 텍스트를 담을 수 없다.
<Text> 태그로 감싸주면 활용 가능.

View : 컴포넌트를 담고 배치하는 컴포넌트

Text : 텍스트를 표시

Button : 버튼 등

다양한 핵심 컴포넌트들은 공식 홈페이지에서 찾아 활용하는 것을 추천

https://reactnative.dev/docs/components-and-apis

리액트와 정말 비슷하다.

스타일 적용하는 방법

React Native는 CSS 지원하지 않음.

파일을 추가하거나 css 언어를 사용하지 않는다.

1. 인라인 스타일 추가해서 스타일 객체를 프로퍼티로 전달
2. 별도의 객체를 정의해서 프로퍼티로 전달

1. 인라인 스타일 방식

말 그대로 태그 안에 스타일을 적용하는 방식이다. 하지만 좋은 방식은 아니다.

jsx 코드와 스타일 코드의 구분이 명확하지 않기 때문. 가독성도 떨어짐.

2. 별도의 객체를 정의해서 프로퍼티로 전달

stylesheet 객체 사용,  JSX 코드와 스타일 코드를 명확히 구분해줌. 스타일 재사용 가능

dummyText라는 객체 안에 스타일을 정의해서 Text 태그의 프로퍼티로 전달한 것을 알 수 있다.

동일한 스타일을 두군데 작성하고 싶을 때 단순하게 프로퍼티만 전달하면 되기 때문에 그 부분에서도 간편하다.

꿀팁 사이트

색상 설정 및 사용하는 다양한 방식

https://reactnative.dev/docs/colors

컴포넌트가 지원하는 스타일 프로퍼티

https://reactnative.dev/docs/view-style-props 

Flex Box

CSS에서 Flex Box 속성을 잘 아는 사람에게는 익숙할 것이다.

위에서 스타일을 적용하는 방식대로 적용하고, Flex를 사용해 레이아웃을 배치한다.

여기서 한가지 다른 점이 있다.

Flex의 기본 배치 방향은 Default가 row인데

리액트 네이티브에서는 특이하게도? Column 방향이 Default였다.

별도로 명시하지 않으면 View들이 세로로 쌓이는 것을 보면 이해가 되는 부분이다.

여기서 추가로 알아야할 점은 display:flex는 View의 기본 속성이라는 점이다.(기본 속성이 flex인 게 좀 신기하다.)

div 태그는 block 속성인데, View 태그는 Flex 속성인 것도 차이점으로 알아두면 좋을 것 같다.

그래서 별도의 스타일을 적용하지 않아도 Column 방향으로 정렬된다.

SearchContainer을 보면 기본으로 flex가 적용되어있으니 기본적으로 display: flex와 같은 스타일은 따로 지정해주지 않고

바로 배치방향을 가로 방향으로 변경했다. 그리고 다른 속성들 사용 방법은 동일하다.

굳이 다른 점은 스타일이 카멜케이스로 작성되어있다는 점이다.

이런 부분은 바로 눈에 보여서 리액트와 다르다는 것을 바로 알수 있는 부분이다.

리액트와 알게 모르게 다른 부분이 있어서 헷갈리는 부분이 있는 것 같지만,

리액트를 잘 다룰 줄 안다면 이런 주의사항만 잘 숙지해서 바로 개발에 들어가도 괜찮을 것 같다.

그리고 생각보다 차이점들을 하나 둘 씩 알아가는게 재밌는 것 같다.

리액트와 리액트 네이티브의 사용법 차이 위주로 헷갈리는 부분들을 중심으로 글을 작성해야겠다.