[React] 예시 2. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸기

https://print-blue.tistory.com/191

[JavaScript ] 예시 1. 순수한 자바스크립트 페이지

 

그 전 작업과 동일하지만 component 기반으로 수정해보자 !

이 전 작업은 생략 !

 

script 영역

function H1(props) {
  return <h1>상품 1페이지{ props.children }</h1>
}

function H1(props) {
  return <h1>상품 1페이지{ props.children }</h1>
}

 

const Form = () => { // 함수 표현식 익명 함수 
  return (
    <form action="">
      <input type="text" name="name" placeholder="상품명을 입력하세요"/>
      <button type="submit">추가</button>
    </form>
  );
}
const MainCard = ({img}) => { // 함수 표현식 익명 함수
  return (
    <div className="main-card">
      <img 
        src={img} 
        alt="올리브 오일" 
        width="400"
      />
      <button>🤍</button>
    </div>
  );
}
const FoodItem = ({img}) => { // 함수 표현식 익명 함수
  return (
    <li> 
      <img 
        src={img} 
        alt="음식"
        style={{ width : '150px', border : '3px solid green' }}
      />
    </li>
  );
}
const Favorites = () => { // 함수 표현식 익명 함수
  return (
    <ul className="favorites">
      <FoodItem img="img/food-one.jpg"/>
      <FoodItem img="img/food-two.jpg"/>
      {FoodItem({ img : "img/food-three.jpg" })}
    </ul>
  );
}

 

const app = (
  <div>
    <H1></H1>
    <H1>입니다!</H1>
    <Form />
    <MainCard img="img/food-one.jpg" />
    {Favorites()}
  </div>
);

 

const foodLiInsert = document.querySelector('#food-li-insert');
ReactDOM.createRoot(foodLiInsert).render(app);