디자인하는개발자
200
2021-10-14 09:16:52 작성 2021-10-14 09:48:13 수정됨
2
46

Expo 컴포넌트 분리 방법


안녕하세요~!

Expo로 날씨 앱을 개발 중에 있습니다.

이번에 Expo (Reactnative) 를 처음 써보다 보니 우여곡절이 많네요

앱을 코딩하면서 현재는 App.js 에다가 모든 코드를 짜놓은 상태입니다.

이걸 컴포넌트와 기능 별로 분리하려고 하고 있습니다.

일단 기능은 보류하고 컴포넌트를 먼저 나눠보려고 하는데 

header.js 에 

import React from "react";
import { StyleSheet, View, ScrollView, SafeAreaView } from "react-native";

export function header({ children }) {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        showsHorizontalScrollIndicator={false}
      >
        <StatusBar style="auto" />
        <View style={styles.header} />
        <View style={styles.content}>
          {children}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#F2F2F7",
  },

  header: {
    height: 10,
  },

  content: {
    flex: 1,
  },
});


위와 같이 코드를 짜서 넣고, App.js에서

import header from "./header"

export default function App() {
  return (
    <header> 
      <Text style={styles.txt_h5_b}>
              "test"
      </Text>
    </header>
  );
}


이런 식으로 하면 잘 불러와 질 줄 알았는데 Can't find variable: StyleSheet 에러가 나네요..

위 코드는 제가 간략하게 요약한 건데 

header.js 에서 export function header({ children }) {

이렇게 { children } 값을 받아오고

     <View style={styles.content}>
       {children}
     </View>
이런 식으로 코드를 짜면 부모 컴포넌트에서 <header> </header> 사이에 넣은 코드들이
담기는 거 아닌가요?

+ 추가로 하나 더 궁금한 것은 코드 참고를 하면서 블로그들을 보니 어떤 분은 그냥
function TodoTemplate({ children }) {
  return <TodoTemplateBlock>{children}</TodoTemplateBlock>;
}
이런 식으로 { children } 만 바로 쓰시고, 또 다른 분들은
function Border(props) {
    return (
        <div>
            {props.children}
        </div>
    );
}
이렇게 props를 이용하여 쓰시더라구요 이 둘의 차이점은 뭘까요?


아시는 분들의 도움 부탁 기다리겠습니다 :)
0
  • 답변 2

  • 페코옹
    1k
    2021-10-14 10:34:40

    header를 Header로 변경하세요


    둘의 차이점은 props로 받아서 사용할지

    구조분해 해서 사용하냐의 차이입니다.


    편한 방법으로 하면됩니다.

  • 디자인하는개발자
    200
    2021-10-14 13:35:53

    페코옹님 감사합니다

    말씀대로 해서 해결 되었습니다!

    하나만 여쭙자면 header로 하면 이유가 무엇일까요?

    header라는 이름이 리액트에 이미 내장이 되었어서 일까요? 

    아니면 앞 글자가 소문자라 그런 것 일까요?

  • 로그인을 하시면 답변을 등록할 수 있습니다.