이벤트 리스닝

• clickHandler() 로 함수를 지정하면 자바스크립트 코드가 실행될 때 해당 구문도 실행된다.
• But clickHandler 로 함수에 대한 포인터만 지정해둔다.

const ExpenseItem = (props) => {
  const clickHandler = () => {
    console.log("Clicked!");
  };

  return (
    <Card className="expense-item">
      <ExpenseDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
      <button onClick={**clickHandler()**}>Change Title</button>
    </Card>
  );
};

• 함수가 코드 자체가 실행될 때 실행되는데, 단순히 clickHandler 라고 지정만 해두면 실제로 버튼을 눌렀을 때 코드가 반응한다.

• on* 라는 것들은 요소에 대한 반응을 사용할 때 사용한다.

<aside> 💡 보통 처리를 하는 함수에 대해 네이밍을 할 때는 “Handler” 라고 짓는다.

</aside>

• 리액트는 응용프로그램이 처음 렌더링됐을 때 모든 과정을 실행하고 그 후에 다시는 반복하지 않는다.
  • 작동방식 : index.js → App.js →

useState

• 항상 두 개의 요소가 있는 배열을 리턴한다.

• 첫 번째 요소는 현재 상태 값이고 두 번째 요소는 그걸 업데이트하는 함수이다.

• useState를 사용하면 state가 변할 때 해당 컴포넌트 함수를 다시 호출하고 싶으면 state를 업데이트하는 함수를 호출하면 된다.

• state 관련 함수 호출 시, 해당 컴포넌트가 사용된 부분을 다시 로드한다.

  • 다른 컴포넌트는 빼고 해당 state가 등록된 컴포넌트만 다시 평가한다.