리액트 시작하기

• 클론 받을시node-modules 파일은 git ignore되기 때문에 node-modules 파일을 npm install을 통해 받아야 한다.

jsx란?

• JSX(JavaScript XML)는 자바스크립트의 확장 문법으로, 리액트 요소를 생성.
  HTML과 비슷해 보이지만 자바스크립트 종류이다.

jsx 규칙

1. return 안에 있는 태그는 반드시 하나의 태그로 묶여야 함.
   -> 형제 태그가 있는 경우
2. 빈 태그(닫는 태그가 없는)는 반드시 />로 마감
   -> img, br, input ..
3. 태그의 class 속성은 자바스크립트 키워드 class와 겹쳐서 className으로 표기
4. 의미없는 부모는 <React.Fragment>로 감싸면 됨 = <>
   -> 1번처럼 하나의 태그로 묶었을 때 이를 처리가능
5. 변수값이나 함수를 출력할 때는 {}로 감싸면 됨

---

React 컴포넌트

• React는 컴포넌트 기반의 라이브러리
• 컴포넌트는 재사용 가능한 코드의 묶음이며, 각각의 컴포넌트는 독립적인 기능을 수행가능

클래스 컴포넌트

import React from 'react';

class Hello extends React.Component {

  render() {

    return (
      <>
      <h1>하하호호</h1>
      <h2>냠냠뇸뇸</h2>
      </>
    );
  }
}

export default Hello;

• 이제 사용 X

함수형 컨포넌트

import React from "react";

function Bye() {

  return (
    <div>
      <a href="https://www.naver.com">네이버로 이동</a>
    </div>
  )
}

export default Bye;

-> 화살표함수로도 가능

import React from "react";

const Greet = () => {

  return (
    <ul>
      <li>사과</li>
      <li>딸기</li>
      <li>오렌지</li>
    </ul>
  )
};

export default Greet;

컨포넌트에서 사용하는 데이터

• Props (Properties): 부모 컴포넌트 -> 자식 컴포넌트에게 전달되는 데이터
• State: 컴포넌트의 내부 상태를 관리하는 데이터
• rafce -> 리액트 컴포넌트 단축키

---

props

• 단방향으로 데이터 전달할 때 사용
• props는 컴포넌트를 재사용 가능하게 만들며, 동일한 컴포넌트에 다른 값을 주입하여 다양한 결과를 얻을 수 있게함

function Person(props) {
  return <h1>Hello, {props.name}. You are {props.age} years old.</h1>;
}

function App() {
  return <Person name="Sarah" age={28} />;
}

• 위 예시를 보면 props는 name, age를 받는다.
• 다른 타입의 데이터를 보낼 때는 {} 필수!

    <ExpenseItem title={"하하호호"} price={8000} />
    <ExpenseItem title={"룰루랄라"} price={6000} />
    <ExpenseItem title={"꾸꾸까까"} price={5000} />

---

props.children

• 컴포넌트의 opening 및 closing 태그 사이에 배치되는 모든 것을 포함

function Welcome(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <Welcome>Hello, world!</Welcome>;
}

• App 컴포넌트에서 Welcome 컴포넌트 사이에 Hello, world!는 children으로 전달 -> Welcome 컴포넌트에는 "Hello, world!"가 출력
  

• 컴포넌트를 쓸 때 <Card /> 방식으로 쓰지만 원래 태그처럼 <Card>내용</Card> 으로 사용하면 내용 부분은 prop.children을 의미

---

이벤트 바인딩

• 기존에는 document.getElementById()로 잡았지만, React에서는 컴포넌트의 return이 된 시점에 dom이 생기기때문에 이벤트 핸들러 함수를 미리 선언
• 등록된 이벤트가 실행되는 시점에는 DOM이 형성된 시점이기 때문에, 미리 선언해놓은 이벤트 함수 안에서는 document.qs, getElement 또한 가능

const ExpenseItem = ({ date, title, price: exPrice }) => {

  // 함수 선언

  // 원화 표기법으로 변환
  const formattedPrice = new Intl.NumberFormat('ko-KR').format(exPrice);

 // 이벤트 핸들러 밖에서는 docu.qs 불가능
  
  
 // 이벤트 핸들러 선언
 const clickHandler = e => {
   // 이 곳은 DOM이 형성된 시점(버튼이 그려진 이후)이기 때문에 여기서는 docu.qs이 가능
   console.log(e.target.previousElementSibling.firstElementChild.textContent);
  console.log('클릭함!');

  // const $price = document.querySelectorAll('.expense-item__price'); // 가능
  // console.log($price);
};

  

  return (
      <Card className='expense-item'>
        <ExpenseDate exDate={date} />
        <div className='expense-item__description'>
          <h2>{title}</h2>
          <div className='expense-item__price'>{formattedPrice}원</div>
        </div>
        <button id='btn' onClick={clickHandler}>버튼1</button>
        <button id='btn2' onMouseOver={e => alert('하하!')}>버튼2</button>
      </Card>
  )
}