[React Native] Layout 다루기(View, margin, padding, ScrollView)

1. View

---

 

React Native에서 <View>는 박스(box)와 같은 개념이다.

여러 컴포넌트를 그룹화하는 용도로 사용된다.

화면의 레이아웃을 만들 때 기본적으로 사용되는 가장 중요한 컨테이너.

<View style={{ padding: 10 }}>
  <Text>Hello React Native!</Text>
</View>

 

 

 

 

2. margin과 padding

---

☾ padding (박스 내부 여백)

 

박스 안쪽 공간을 의미한다.

텍스트나 이미지가 박스 테두리와 겹치지 않게 한다.

 

<View style={{ padding: 20, borderWidth: 1 }}>
  <Text>안쪽 여백 적용</Text>
</View>

 

 

☾ margin (박스 외부 여백)

박스 바깥쪽 공간을 의미한다.

다른 컴포넌트와의 간격을 만든다.

<View style={{ margin: 20, borderWidth: 1 }}>
  <Text>바깥 여백 적용</Text>
</View>

 

 

margin vs padding

• padding: 안쪽 여백 → 내용물과 경계 사이 거리
• margin: 바깥 여백 → 다른 박스와의 거리

 

• React Native에서는 margin이 겹치지 않는다 (웹과 차이 있음).

 

 

 

3. ScrollView

---

화면에 내용이 너무 길어서 잘리는 경우, 스크롤 가능하게 만드는 컴포넌트.

모든 컴포넌트를 <ScrollView>로 감싸면 화면을 위아래로 스크롤할 수 있다.

• style: 휴대폰 크기의 고정된 화면의 스타일(배경색, 전체 크기 등)
• contentContainerStyle: 내용을 다 담은 전체 긴 화면의 스타일(padding, 정렬 등)

 

<ScrollView>
  <Text>긴 내용...</Text>
  <Text>더 긴 내용...</Text>
</ScrollView>