Component가 무엇인지, Props로 상위 컴포넌트에서 하위 컴포넌트로 값 주고 받기

1.컴포넌트

: 재사용이 가능한 개별적인 여러 조각

UI(User Interface)는 여러 개의 Component로 나뉜다. 

카톡 화면은 위와 같이 5개의 컴포넌트로 나뉘는 것이다. 

컴포넌트는 java로 치면 매소드 같은 녀석이다. 

 

2. 컴포넌트의 종류

(1) 클래스형 컴포넌트

a. 쓰기 위한 조건

 - React.Component라는 클래스를 무조건 상속해야 함. 

- render() 라는 함수를 사용해야 하고, 위 함수의 return 값에다가 하고 싶은 내용물을 적어야함.

b. state, lifestyle(생명 주기)라는 기능을 사용할 수 있음.

c. 함수 형 컴포넌트보다 메모리를 더 사용한다는 단점.

(2) 함수형 컴포넌트 

a. state, lifestyle이라는 기능을 사용하지 못함. 따라서 Hook이라는 기능을 대신 사용해야함. 

b. class보단 간결함. 따라서 가독성이 좋음

c. class 컴포넌트보다 메모리 용량이 작음

d. React 공식 문서에서도 함수형 컴포넌트 + Hook을 사용하라고 권장함. 

3. Props를 이용해 상위 컴포넌트에서 하위 컴포넌트로 값 주고 받기 

import { StatusBar } from 'expo-status-bar';
import { Button, Switch } from 'react-native';
import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';

// props에는 title = "친구"라는 값이 props안에 인스턴스 변수나 구조체의 멤버처럼 들어간다. 
const Header = (props) => {
    console.log("props of Header", props)

    // props안의 특정 변수를 꺼내 쓰는 법. 
    return <Text>{props.title }</Text>

};

const MyProfile = (props) => {
  return <Text> MyProfile </Text>
  
};

const Division = (props) => {
  return <Text> Division </Text>
  
};

const FriendSection = (props) => {
  return <Text> FriendSection </Text>
  
};

const Profile = (props) => {
  return <Text>{props.name}</Text>
};

const FriendList = () => {
  return (
  <View>
      <Profile name="이상로"/>
      <Profile name="이지훈"/>
      <Profile name="정순살"/>
      <Profile name="정재욱"/>
      <Profile name="한규범"/>
    </View>
    );
  
};
export default function App() {
  return (
    <View style={styles.container}>
      <Header title="친구"/>
      <MyProfile/>
      <Division/>
      <FriendSection/>
      <FriendList/> 
      
    </View>


  );
}

잘은 모르겠지만, App()이란 메인 함수형 컴포넌트에 있는 태그들이 상위 컴포넌트 이고, 

해당 이름과 똑같은 이름의 JS 변수들이 하위 컴포넌트 인 거 같다. 돌아가는 원리를 보면.

변수들은 익명 함수를 데이터로 가지고 있고, 이 익명 함수에는 props라는 객체 인자를 받아 쓸 수 있다. 

 

props는 상위 컴포넌트에서 받은 값들을 하위 컴포넌트로 전달해주는 객체이다.  

여기서 상위 컴포넌트는 App() 이고, 하위 컴포넌트는 myProfile을 비롯한 나머지 컴포넌트들이다. 

** 참고** 

App()은 컴포넌트를 함수를 정식으로 표현하는 구문으로 나타냈고, 

나머지는 변수에 익명함수 데이터를 대입하는 형식으로 나타냈다. 

 

props 라는 객체에는 상위 컴포넌트의 속성으로 쓰인 값들이 구조체 멤버 형식으로 들어감. 

name = "이상로" 라는 속성이 있으면, 

//첫 번째 Myprofile 컴포넌트  
props{
name = "이상로"
}

요런 식으로 들어감.

props에서 name이란 녀석의 Value를 꺼낼려면 props.name으로 꺼내야함. C++ 의 구조체나 Java 의 객체 처럼 안쪽이 되어있나보다. 

 

**주의점** 

어떤 변수의 값을 꺼내 쓸 때는 {} 템플릿 이용해줘야 한다. {변수이름} == 값 이다. 

4. 스스로 해보기 

import { StatusBar } from 'expo-status-bar';
import { Button, Switch } from 'react-native';
import { Image, ScrollView, StyleSheet, Text, TextInput, View } from 'react-native';


export default function App() {
  return(
    <View style={styles.container}>
      
      <FriendList/>
      <Footer/>
      

    </View>
  )
}

const FriendList = () => {
  return(
    <View>
    <Profile name = "이민혁"/>
    <Profile name = "이상로"/>
    <Profile name = "이지훈"/>
    <Profile name = "정재욱"/>
    </View>

  )
}

const Profile =(props) => {
  return (<Text>{props.name}</Text>)
}

const Footer =() => {

}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

컴포넌트는 무조건 대문자여야 한다. 

왠지 모르겠지만 view 에서는 HTML 태그 쓰듯이 <> </> 이걸 써서 어떤 기능을 바로 구현하지 못한다. 

무조건 </>태그로 컴포넌트를 만들어서 그 컴포넌트의 하위 컴포넌트에서 연산이나 출력을 만들어서 화면에 띄워야 한다. (한 단계 더 걸린다.)