stateless 컴포넌트와 stateful 컴포넌트

export default class App extends Component{

  render(){
 
    return(
      <Car/>
    );
  }
}


// stateless 컴포넌트  ( 기본적으로 유지하는게 없는 순수한 함수 상태)
function test(testValue){
  return <View><Text>테스트1</Text></View>
}
// 또는
const test_2 = () =>{
  <View><Text>테스트1 의 다른 방식  </Text></View>
}

/*   alt + shift + a
function test2(){
  return <Text>This is English</Text>
} */

// stateful 컴포넌트  ( 고유한 상태를 유지하는 컴포넌트 )
class Car extends Component {
  render() {
    return <Text>This is car</Text>;
  }
}

 

 

사용예시

export default class App extends Component{

  render(){
 
    return(
      //<Car/>
      <View>
        <Header/>
        <Main/>
        <Footer/>
      </View>
    );
  }
}


class Header extends Component {
  render(){
    return(
      <View>
        <Text>HEADER 컴포넌트</Text>
      </View>
    )
  }
}


const Footer = () =>(
  <View><Text> Footer 컴포넌트</Text></View>
)


const Main = () =>(
  <View><Text> Main 컴포넌트</Text></View>
)