React] components, props에 대한 이해 (심화) + 동적렌더링

어제 만들었던 파일을 이어서 연습해보자.

//App.js

import React from "react";


function Snacks({taste}) { 

return <h2> My mom gave me a cookie. It was {taste} </h2>;
}

function App() {
  return  ( 
    <div>
      <h1> Hi. </h1>
      <Snacks name = "pepero"
        taste = "sweet"
        priceDiscount = {false} />

      <Snacks taste = "good" />
      <Snacks taste = "awesome" />
      <Snacks taste = "bitter" />
      <Snacks taste = "not good" />
      <Snacks taste = "salty" />


    </div>
     
    
  );
}

export default App;

화면 출력 :

1. components에 props 를 지정하면?

지정한 props 만 출력된다.

즉,

//App.js

import React from "react";


function Snack({taste}) {
  return <h3> I sold 5 {name} </h3>
	}


function App() {
  return(
    <div> 
    <Snack name = "pepero" 
    		taste = "sweet"
    		brand = "lotte" 
    		priceDiscount = {false} />
 	</div>

 );
}

이렇게 쓰면
컴파일이 안된다.

function Snack({taste}) {
  return <h3> I sold 5 {name} </h3>
	}

Snack 의 {taste} 라는 props를 불러왔으면
return 에도 해당 props 에 대한 내용이 나와줘야 한다.

2. 동적으로 해보자. 엑셀의 매크로라고 하면 되려나.

map 함수로 작동한다.

// App.js

const syunnkoCooks = [

  { dishes: "kimchi",
    image: 
    "https://cdn.imweb.me/upload/S201905105cd4e5325582d/0b667240284bd.jpg",
},

    { dishes: "tamagoyaki",
      image: "https://daebakkitchen.hk/wp-content/uploads/2021/03/%EA%B3%84%EB%9E%80%EB%A7%90%EC%9D%B4.jpg",
},


{  dishes: "medamayaki",
image: 
"https://t1.daumcdn.net/cfile/tistory/99EB093A5C7289111F",
},


{  dishes: "zouni",
image: 
"https://stat.ameba.jp/user_images/20100101/15/koichi-shoot/d1/13/j/o0600045010360906737.jpg?caw=800",
}


]

이런 Array (배열) 을 정의해보자.

요리, 이미지 이렇게 있다.

앞서 만들었던 함수를 조금 바꿔보자.

...중략


function Snacks({name, image}) { 

return <div> <h2> My granny cooked very well. It was {name}. </h2>;

See it. <img src= {image} /> 

</div>

}



..중략

---

Snacks라는 함수가 좀 더 풍성해졌다.
함수 속 props가 하나 더 늘어났기 때문에.

이 syunnkoCooks 와 Snacks 를 합쳐보자.

function App() {
  return  ( 
    <div>
      <h1> Hi. </h1>
      
      {syunnkoCooks.map( much => 
        <Snacks name={much.dishes} image={much.image} />
        )}


    </div>
     
    
  );
}

export default App;

동적으로 잘 동작한다.

아주 재밌군.

끗.