문제점: empty data가 가운데로 오지 않는다
원하는 것: 보통은 flex 값을 1로 두어서 가운데로 오게 하지만, 찾아보니 flex는 누적합의 비율을 계산해서 위치를 잡는다고 한다.
flex 활용법 참고 링크: https://reactnative.dev/docs/flexbox

해볼것: 현재 text 외에는 아무것도 없는 페이지 인데, 왜 flex 값을 1로 두면 안되는지 다른 방법없나 찾아보는 중입니다.

색칠해 보니까, empty data 가 차지하는 공간이 전체가 아니라 일부임

인증탭이니까
Authentication이 좋을거같은데요?

authentication branch를 만들었는데
저희가 만들 템플릿의 구현이 이루어지는 곳입니다.

이 브랜치는 아래와 같이 관리하겠습니다.
새로운 템플릿을 구현하실 때에는 먼저 authentication branch로 checkout하고
만들 template의 간략한 이름으로 branch를 만들어주시고 그곳에서 구현 하신 다음에
해당 template이 완성이 되면 authentication branch와 merge시켜주시면 되겠습니다.

해결 내용: 부모 컴포넌트의 사이즈를 알아낼 수 있는 onLayout
문제점: 저번에 원 size를 resposive(반응형)으로 설정할때 적용할 수 있음-컴포넌트 사이즈 측정 훅을 만든다

참고한 내용:
https://stackoverflow.com/questions/56738500/react-native-onlayout-with-react-hooks
https://ko.reactjs.org/docs/hooks-custom.html
두개 참고했고, 코드는 아래처럼 짬. 훅은 class의 단점들을 보완하기 위해 생긴 것이라고 함.

결론: dogCard(Item)에 있던 원 size를 부모 component size에 맞출 수 있었다..

function Item({item}) {
const [parentHeight, setParentHeight] = useState({height:0}); // 동적인 값 관리
const onLayout=(event)=> {
const {x, y, height, width} = event.nativeEvent.layout; // position (x, y), size (height, width)
setParentHeight({height:height});
};

return (
<View style={styles.item} onLayout={onLayout}>
<Image source={{uri: item.photo}}
style={ {width: parentHeight.height/2,
height:parentHeight.height/2,
borderRadius:50,
margin: '3%'}}/>
{item.title}
나이: {item.title}
성별: {item.title} 중성화: {1}
입양처: {item.title}

)
}