react 기초 개념 props

리액트는 최종적으로 단 한개의 컴포넌트를 그려야함 (index.js 에서 app.js)

import React from 'react';


function Food(props){
 return <h3>i love {props.fav}</h3>;
}

function App() {
 return (// fav props 값으로 kimchi 추가 
   <div>
     <h1>hel</h1>
     <Food fav="kimchi"/>
   </div>
 );
}

export default App;

props에 있는 데이터는 문자열의 경우를 제외하고 모두 중괄호{}로 감싸야 함

구조분해 할당
props.fav ==

function Food(props){
 {fav}=props
 return (<h3>i love {fav}</h3>
   
   );
}

or

function Food({fav}){
 
 return (<h3>i love {fav}</h3>
   
   );
}

map 함수 활용 컴포넌트

map 함수

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. -mozilla

var numbers = [1, 4, 9];
var doubles = numbers.map(function(num) {
  return num * 2;
});
// doubles는 이제 [2, 8, 18]
// numbers는 그대로 [1, 4, 9]



or 



const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2); //화살표 함수 참고

console.log(map1);
// expected output: Array [2, 8, 18, 32]

비효율적인 props 코드

function Food({fav}){
  
  return (<h3>i love {fav}</h3>
    
    );
}

function App() {
  return (// fav props 값으로 kimchi 추가 
    <div>
      <h1>hel</h1>
      <Food fav="kimchi"/>
      <Food fav="b"/>
      <Food fav="c"/>
      <Food fav="d"/>
    </div>
  );
}

jsx)

• js 내 html은 ()로 감싸고 , html 내 js는 {}로 감싼다.
• 또한 여러 태그들은 div 등의 한 태그로 감싼다.

import React from 'react';


function Food({dish,img}){
//이를 구조 분해 할당으로 받고 표현
return (
  <div>
<h3>i love 2 {dish}</h3>
  <img src={img}/>
  </div>
  );
}

var foodILike=[

{
  name:'kimchi',
  image:''....// 구조상 생략
},

];


function App() {
return (// fav props 값으로 kimchi 추가 
  <div>
    
    {foodILike.map(dish => (<Food dish={dish.name} img={dish.image}/>))}

// dish props로 map함수 때문에 첫번째 객체가 dish 매개변수로 넘어가고 name 프로퍼티가 Food 컴포넌트 함수로 넘어감
  </div>
);
}

export default App;

dish props로 map함수 때문에 첫번째 객체가 dish 매개변수로 넘어가고 name 프로퍼티가 Food 컴포넌트 함수로 넘어감

이를 구조 분해 할당으로 받고 표현