개발/자바스크립트

react native / 속성(Props)이 이해가 잘 되지 않아 쓰는 글

기디개 2022. 7. 23.

목차

    반응형

    속성은 쉽게 생각해서 컴포넌트에 데이터를 전달한다는 것이다.
    그 전달 모습은 키와 벨류의 형태

     

    <Text> 태그에는 numberOfLines 라는 속성이 있고

    <Image> 태그에는 resizeMode라는 속성이 있다.

     

    예를들어, 아래와 같은 코드에서

    <Image style={styles.aboutImage} source={{uri:aboutImage}} resizeMode={"cover"}/>

     

    react native / 속성(Props)이 이해가 잘 되지 않아 쓰는 글

    resizeMode는 키가 되고

    cover는 값이 된다.

     

    * 참고로 resizeMode는 컴포넌트 크기에 맞게 이미지를 조절하는 스타일이다.

    * 속성들은 공식 문서에 나와 있고, 해당 엘리먼트들이 태어날 때부터 가지고 있는 속성이다.


    <Card/> 컴포넌트를 만들었다고 치고,

    이 <Card/> 컴포넌트 내에

    <Card image={'이미지 주소'}/>

    라고 속성을 써 넣으면,

    이 <Card/>는 image라는 속성이름에 {'이미지 주소'} 값을 을 갖게 된다.

    즉 키와 벨류의 값을 갖게 된다.

    (원래는 기본적으로 태어나고 있는 속성이 아닌데, 억지로 부여하는 것이다.)

     

    여기에서 image(속성)

    이미지 주소

     

    여기에서 속성을 부여받은 컴포넌트는 

     

    react native / 속성(Props)이 이해가 잘 되지 않아 쓰는 글

     

    이와 같이 나타낼 수 있다.

    즉, 앞의 content는 image라는 속성을 내포하고 있고

    뒤의 content는 content라는 값을 가지고 있다.

     

    그렇기 때문에 뒤의 content는 content라는 이름을 가지고 있지 않아도 된다.

    변경되어도 되는 값이지만, 그 값을 받기 위해서 이름을 일치시켜야 한다.

    더보기

    여기서 중요한 규칙 둘

     

    1. 컴포넌트에 속성(데이터)을 부여해줘서 전달할땐,

    키와 벨류(content={content}) 형태로 전달해줘야 할 것

     

    2. 컴포넌트를 반복문 돌릴땐, 컴포넌트마다 고유하다는 것을 표현하기 위해,

    map에서 나오는 인덱스(i)를 key = {i} 속성 전달 형태로 꼭 넣을것! 입니다.

    자 이제,

    "내가 그의 이름 불러주었을 때, 는 나에게로 와서 꽃이 되었다."

    라는 문장 처럼

     

    이름(<Card content = {content} key={1}/>)을 만들었으니

    가 누구인지 지칭해야 한다.

     

    그를 js 파일로 만들어보자.

    react native / 속성(Props)이 이해가 잘 되지 않아 쓰는 글

    그를 만들때는 그의 속성을 만들되 키 값(그의 이름 = 앞 content)을 동일하게 해야한다.

    이렇게 되면 메인페이지에서 card의 content 속성을 불러올 수 있는 것이다.

     

     


     

    즉, 우리가 한 것은

    content라는 새로운 변수를 만들고,

    변수는 어떤 속성이 있는지 만들어서

     

    새로운 변수를 메인화면에서 뿌린 것이다.

    이런게 바로 컴포넌트..!

    반응형

    댓글