[React] 예시 3. 순수한 자바스크립트 페이지를 리액트 component 로 바꾸고, 기능 추가(이벤트 설정)

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

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

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

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

 

이번 포스팅에서는 좋아요 버튼을 구현하기 위해서 함수 안에 함수를 정의할거다 !

script 영역

H1 과 Form 은 딱히 수정할 게 없음 !

const 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 Favorites = () => {
  return (
    <ul className="favorites">
      <FoodItem img="img/food-one.jpg"/>
      <FoodItem img="img/food-two.jpg"/>
      {FoodItem({ img : "img/food-three.jpg" })}
    </ul>
  );
}

 

하지만 MainCard 부분에서는 

좋아요 버튼을 구현하기 위해서 함수 안에 함수를 정의할건데 여기서 알아야 할 점은

함수 내 함수를 정의하면 변수로 저장되기 때문에 호출할 때 () 를 생략해야 한다.

 

button 의 onCick : 마우스로 클릭했을 경우 이벤트 발생시켜 해당 코드 실행 !

button 의 onMouseOver : 마우스를 올렸을 경우 이벤트 발생시켜 해당 코드 실행 !

const MainCard = ({img}) => {
  // Javascript 영역
  function handlerHeartClick() {
    console.log('하트 클릭 !');       
  }
  function handlerHeartMouseOver() {
    console.log('하트 스쳐지나감 !')
  }

  return (
    <div className="main-card">
      <img 
        src={img} 
        alt="올리브 오일" 
        width="400"
      />
      <button onClick={handlerHeartClick} onMouseOver={handlerHeartMouseOver}>🤍</button>
    </div>
  );
}

5번 마우스 스쳐 지났고, 2번 클릭함 !

 

태그 내에 스타일도 지정할 수 있다 !

속성은 쉼표로 구분해준다 !
이것또한 프로퍼티(속성)이기 때문에 {} 로 감싸 표현해줘야 한다

CSS 에서는 '-' 하이픈을 사용하지만 자바스크립트 객체에서는 카멜케이스 표기법으로

background-size는 backgroundSize로 표기한다.

const FoodItem = ({img}) => {
  return (
    <li> 
      <img 
        src={img} 
        alt="음식"
        style={{ width : '150px', height : '100px', backgroundSize : 'contain' }}
      />
    </li>
  );
}

 

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

 

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