RN flexbox - 1

web-front 개발을 하신분들은 grid라는 것에 대해 매우 친근하실겁니다.

쉽게 설명하면 화면분할에 대한 하나의 시스템이죠. 단순히 1픽셀, 1픽셀씩 크기를 지정하는게 아닌, 전체적인 크기를 지정하는 것이지요.(설명이 매우 이상합니다. 그냥 검색해주세요 ㅠㅠ. 몰라도 그 뒤 설명에는 지장이 없습니다)

RN에서는 이 그리드 시스템에 flexbox라는 것을 이용하는데요, 현재 대부분의 최신 웹브라우저에서 지원하는 시스템 입니다.

제가 설명하는것 보다 좋은 글들을 추천합니다.

flexbox 설명-한국어 flexbox 속성 설명-영어

사용하는 방법이 약간 다르긴 하지만 두 글을 전부다 읽고 켜신 상태에서 다음을 진행하시는게 아마 편하실 겁니다.

RN에서 지원하는 flexbox

그리고 이 글 까지 켜신 상태에서 다음을 진행해보죠.

일단 가장 기본적인

이러한 레이아웃 부터 만들어 보죠.

어떻게 만들까요? 일단 가장 크게 가로로 나뉘어져 있군요. left, right - 1 그 다음은 right는 위, 아래로 나뉘어져 있구요 rightTop, rightBottom - 2

class gitbookTest extends Component {
  render() {
    return (
      <View>

      </View>
    );
  }
}


const styles = StyleSheet.create({


});

AppRegistry.registerComponent('gitbookTest', () => gitbookTest);

아무것도 없는 상태에서 일단 밑에 답지를 보지말고 조금만 생각을 해보세요. 힌트는 이미 드렸습니다. left, right 그다음에 rightTop, rightBottom 잘 모르겠으면 위의 링크 2개를 읽으시면 알수 있으실거에요.

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.left}>
        </View>
        <View style={styles.right}>

        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    backgroundColor: 'red'
  },
  right: {
    flex: 1,
    flexDirection: 'column',
  },

});

일단 여기까지는 하셧나요? 혹시 못하셧다면 위의 것부터 실행을 해보세요. 그런뒤 다시한번 생각을 해보세요. 가로는 이렇게 나눴군. 그렇다면 세로는 어떻게 나눌까?

class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.left}>
        </View>
        <View style={styles.right}>
          <View style={styles.rightTop}>
          </View>
          <View style={styles.rightBottom}>
          </View>
        </View>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  left: {
    flex: 1,
    backgroundColor: 'red'
  },
  right: {
    flex: 1,
    flexDirection: 'column',
  },
  rightTop: {
    flex: 1,
    backgroundColor: 'blue'
  },
  rightBottom: {
    flex: 1,
    backgroundColor: 'yellow'
  }

});

이게 정답입니다. 여기서 right의 flex: 1을 flex: 2로 바꾸어 보세요. 어떻게 되었나요? 그다음에 rightBottom도 flex:2로 바꾸면 어떻게 되나요?

실제로 해보세요.

이제 flexbox에 대해 조금 이해가 되었나요? 다음편에는 flexbox을 좀더 응용을 해보도록 해요.