10. React-Native padding, margin

10-1 개요

padding과 margin은 레이아웃을 할 때 공백을 어느정도 줄껀지를 설정하는 함수이다.

여백을 너무 많이주거나 적게 주게되면 App의 디자인에 문제가 생긴다.

적절한 여백을 통해서 깔끔한 App 디자인을 만들어야 되는데 이 때 중요한 요소가 바로 padding과 margin이다.

https://medium.com/frontendshortcut/margin-vs-padding-c1fc8ea8bfaf

---

10-2 Margin

margin은 부모컴포넌트나 같은 부모 컴포넌트 안에 있는 자식들과의 여백을 지정하는데 사용한다.

—Example

import React from 'react';
import {Text, View, StyleSheet, SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.box1}></View>
        <View style={styles.box2}></View>
        <View style={styles.box3}></View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'white',
  },
  box1: {
    height: 100,
    width: 100,
    marginTop: 20,
    marginLeft: 20,
    marginBottom: 20,
    backgroundColor: 'powderblue',
  },
  box2: {
    marginLeft: 30,
    marginBottom: 40,
    width: 100,
    height: 100,
    backgroundColor: 'skyblue',
  },
  box3: {
		//marginTop: 30,
    marginLeft: 30,
    width: 100,
    height: 100,
    backgroundColor: 'steelblue',
  },
});

export default App;

→ box1에서는 margin 속성 중 Top, Left, Bottom에 여백을 20씩 주었다.

→ Top과 Left에서는 가장 가까운 컴포넌트가 부모 컴포넌트이기 때문에 부모컴포넌트와의 여백을 20씩 주었다.

→ Bottom같은 경우에는 가장 가까운 컴포넌트가 같은 컴포넌트 안에 있는 자식 컴포넌트 box2이므로 box2와의 여백을 20을 주고 마무리했다.

💡

box3의 주석을 해제하면 어떻게 될까?? 위에 설명처럼 동작을 하게되면 box2의 marginBottom이랑 box3의 marginTop은 동일한 공간의 여백을 주게된다. 이런 경우에는 우선순위가 따로 있는게 아니라 두 값이 합쳐져서 총 70의 여백을 주게된다.

❗ auto 속성

margin 속성에는 정수가 아닌 string값인 'auto'라는 속성이 있는데 auto는 시뮬레이터나 브라우저가 자동으로 계산하는 값이다.

❗한번에 설정하기

//모든 방향으로 적용
margin: 10,
//vertical horizontal에만 적용
margin: [5% auto],
//top, horizontal, bottom 적용
margin: [10, 20, 10]
//top, right, bottom, left에 적용
margin: [10, 10, 10, 10]

→ 마지막 파라미터 4개는 top부터 시작해서 시계방향으로 진행이 된다.

---

10-3 Padding

padding은 반대로 자신의 자식 컴포넌트와의 여백을 주는 속성이다.

import React from 'react';
import {Text, View, StyleSheet, SafeAreaView} from 'react-native';

const App = () => {
  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.box1}>
          <Text style={{fontSize: 20, fontStyle: 'italic'}}>hello</Text>
        </View>
        <View style={styles.box2}></View>
        <View style={styles.box3}></View>
      </View>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex : 1,
    backgroundColor: 'white',
  },
  box1: {
    height: 100,
    width: 100,
    paddingTop: 20,
    paddingLeft: 20,
    marginTop: 20,
    marginLeft: 20,
    marginBottom: 20,
    backgroundColor: 'powderblue',
  },
  box2: {
    marginLeft: 30,
    marginBottom: 40,
    width: 100,
    height: 100,
    backgroundColor: 'skyblue',
  },
  box3: {
		marginTop: 30,
    marginLeft: 30,
    width: 100,
    height: 100,
    backgroundColor: 'steelblue',
  },
});

→ box1이란 속성을 준 View 컴포넌트 안에 Text 컴포넌트를 넣어주었다.

→ Text 크기의 default값이 작아서 fontSize속성을 통해 20으로 키웠고 스타일도 italic으로 바꿔주었다.

→ box1의 padding Top과 Left 속성을 각각 20씩 주어서 Text와 뷰의 여백이 20씩 생겼다.

Uploaded by Notion2Tistory v1.1.0