[React] JSX & Props

#10 JSX & Props

• JSX

JS의 확장 문법, HTML 태그를  JS 코드 내에서 사용 가능 

- component는 HTML을 반환하는 함수

- react는 component 이용해 HTML처럼 작성하려는 경우에 필요

JavaScript, HTML 사이의 조합 = JSX

 

 

1. react application이 하나의 component만 rendering 해야한다 ! 

ReactDOM.render(<App />,<Potato /> document.getElementById("potato"));

➣ X 불가 X

 

import App from './App';

 

➣ ' ./ '  → 같은 directory라는 의미 

 

 

2. component에 정보를 보낼 수 있다

재사용 가능한 component를 만들 수 있다 → component를 반복해서 사용할 수 있다

 

 

- componenet 에서 componenet

function App() {
  return (
    <div>
      <h1>Hello !!!</h1>
      <Food fav = "kimchi" />
    </div>
  );
}

➣ App에서 Food component로 정보 보내는 방법

( food component의 인자로 kimchi라는 value로 prop name을 줌)

 

function Food(props) {
  // props 객체로부터 fav 값을 얻음
  return <h1>I like {props.fav}</h1>;
}

 

function Food({ fav }) {
  // props 객체에서 fav 값을 비구조화 할당으로 직접 얻음
  return <h1>I like {fav}</h1>;
}

 

 

---

- componenet 에서 children component 

function Food({ name , picture}) {
  //내부에서 얻는 방법 
  return <div>
    <h2>I like {name}</h2>
    <img src={picture} alt={name} />
    </div>;
}

const foodILike = [
{
  id: 1,
  name: "samgyetang",
  image: "https://img.seoul.co.kr//img/upload/2019/07/25/SSI_20190725184016.jpg"
},
{
  id: 2,
  name: "Samgyeopsal",
  image: "https://www.foodjang.com/New/02/221106957/221106957_b_1.jpg"
}
];


function App() {
  return (
    <div>
      {foodILike.map(dish => (
        <Food key={dish.id} name ={dish.name} picture={dish.image}/>
      ))}
    </div>
  )
}

 

➣ item들에게 각각의 id준다 ( react의 모든 element들 다르게 보일 필요가 있다)

➣ key prop는 Food로 전달 X → react 내부에서 사용하기 위한 것 

➣ img는 alt 사용하기

 

 

• rating 

모든것을 평가한다

number or undefined이다 (string X )

{
  id: 1,
  name: "samgyetang",
  image: "https://img.seoul.co.kr//img/upload/2019/07/25/SSI_20190725184016.jpg",
  rating: 5
},

위 코드 실행 페이지