RN Component 분리

우리는 아직 Component 한개로만 View을 만들고 있었다. 이제 우리는 Component 을 나눌 차례이다.

그 전에 만들었던 코드를 바탕으로 Component을 나누어 보자.

일단 NavBar라는 Component 와 Body 라는 Component을 만들자.


class NavBar extends Component {
  render() {

  }
}

class Body extends Component {
  render() {

  }
}

이제 여기에 우리가 전에 만들었던 View을 알맞게 넣는다. NavBar에는 navBar을, Body에는 body을 넣는다.

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

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

이렇게 넣은뒤, gitBookTest Component을 

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

바꾸어 주자. gitbookTest 컴포넌트는 단순히 NavBar 와 Body을 포함하는 View을 1개 보여준다. 만약 우리가 Body을 바꾸고 싶다면 이제 Body Component에 가서 바꾸면 된다.

results matching ""

    No results matching ""