RN UI 연습 - 1 레이아웃 잡기

우리가 지금부터 만들 것은

이 화면 이다.

분명 음??? 아까 까지는 그냥 배경색깔 바꾸고 사각형만 만들었던거 같은데 갑자기 이걸 어떻게 해????

라고 생각할텐데. 음... 아니다 그것만 알면 이것도 한다.

전혀 어렵지 않기 때문에 일단 해보도록 하자. 진짜 안어렵다. 겁먹지 않고 차근 차근 하는게 중요하다.

우리는 일단 이걸 구성하는 컴포넌트를 나누어 보도록 해요

제가 봣을땐 이렇게 4부분으로 크게 나눌 수 있을것 같습니다.

각각 NavBar, User, ButtonGroup, Taps 라는 component을 만들어요.

class NavBar extends Component {
  render() {

  }
}

class User extends Component {
  render() {

  }
}

class ButtonGroup extends Component {
  render() {

  }
}
class Taps extends Component {
  render() {

  }
}


class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NavBar />
        <User />
        <ButtonGroup />
        <Taps />
      </View>
    );
  }
}

이제 좀 더 그럴듯 하게 Layout을 잡아 봅시다.

class NavBar extends Component {
  render() {
    return(
      <View style={styles.navBar}>

      </View>
    )

  }
}

class User extends Component {
  render() {
    return(
      <View style={styles.user}>

      </View>
    )
  }
}

class ButtonGroup extends Component {
  render() {
    return(
      <View style={styles.buttonGroup}>

      </View>
    )
  }
}
class Taps extends Component {
  render() {
    return(
      <View style={styles.taps}>

      </View>
    )
  }
}


class gitbookTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NavBar />
        <User />
        <View style={{height: 40}}>
        </View>
        <ButtonGroup />
        <View style={{flex: 1}}>
        </View>
        <Taps />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'column',
  },
  navBar: {
    height: 60,
    backgroundColor: '#B0B0B0',
  },
  user: {
    height: 200,
    backgroundColor: '#81D4FA',
  },
  buttonGroup: {
    height: 200,
    backgroundColor: '#C5E1A5',
  },
  taps: {
    height: 100,
    backgroundColor: '#FFD54F',
  }

});

실행하면 이런 화면이 나오게 됩니다.

중간 중간 View는 빈부분을 만들기 위해서 저렇게 만들었습니다. 위에 코드가 이해가 안되면 꼭 읽어 보시고 왜 이렇게 만들어 지는지 고민하셔서 이해하신 다음 뒷부분을 진행해 주시길 바랍니다.

이렇게 만들고 이제 그에 알맞게 1개씩 차근차근 만들면 됩니다

한개씩 차근차근 입니다 - 매우 중요합니다

컴포넌트를 1개씩 만든다는 건 React의 핵심입니다. 유지보수가 용이해 지고 또한 진입장벽을 낮춰주면서 재사용이 가능하게 해줍니다.