처음 배우는 리액트 네이티브 - 공부

라따뚜이·2022년 4월 28일
0

처음 배우는 리액트 네이티브를 공부 중 이해가 가질 않는 부분 1번 내용 때문에 해당 서적 github에 discussion을 하였고, 답변을 정리한 글이다.




1. 상위 컴포넌트에서 하위 컴포넌트로 키만 넘길 때

//Signup.js
<Container >
  <Image rounded /> 
<Container />
//Image.js
<Container >
  {rounded && <PhotoButton onPress={함수}} />}
<Container />
  
 Image.defaultProps = {
    rounded : false,
}

prop-types을 사용함.

Signup.js ----> Image.js rounded 키 만 넘길 때 rounded는 default로 false이지만 키를 넘겨 받았으므로 true로 처리가 된다. console.log()로 전달받은 rounded를 확인하거나 debugger로 break-point를 잡거나 둘 중 하나로 확인 가능하다. 허나, break-point로 상위 컴포넌트에서 키의 값은 잡히지가 않는다.

2. 부모가 props를 전달하지 않은 경우

//Signup.js
<Container >
  <Image /> 
<Container />
//Image.js
<Container >
 <Image rounded />
<Container />
  

roundedundefined으로 출력될 것이다.




3. 부모가 props에 값을 전달하고 자식 컴포넌트가 사용할 경우

//예시 1.
//Signup.js
<Container >
  <Button title="받아요~" /> 
<Container />
//Image.js
const Button = ({title}) => {
 
  return (
    <Container style={styles.ButtonContainer}>
    	<Button title={title}>
    <Container />
    )
}
//예시 2.
//Signup.js
<Container >
  <Button title="받아요~" /> 
<Container />
//Image.js
const Button = (props) => {
 
  return (
    <Container style={styles.ButtonContainer}>
    	<Button title={props.title}>
    <Container />
    )
}

해당 예시가 틀려서 에러가 발생할 수도 있습니다...

profile
돈만 준다면 해 노예

0개의 댓글