리액트 state

import { useState } from "react";

import Card from "../UI/Card";
import ExpenseDate from "./ExpenseDate";
import "./ExpenseItem.css";

function ExpenseItem(props) {
 // state 가 업데이트되면 재 실행된다.
 const [title, setTitle] = useState(props.title);

 // state 는 컴포넌트의 인스턴스별로 나뉘어져있습니다.
 const clickHandler = () => {
   alert("clicked!!");
   setTitle("clicked!!");
 };

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

export default ExpenseItem;

위의 코드는 clickHandler 컴포넌트로 여러 동작들을 하나의 소규모 동작을 수행하는 작은 코드들로 나누어 관리할 수 있게끔 하는 컴포넌트입니다.

리액트에서 값을 수정하고자 할때 값을 =연산자로 할당하면 리엑트에서 인지하지 못하여 업데이트를 해주지 않습니다. 따라서 값이 변하지 않습니다.

useState를 사용하여 값을 수정해야 합니다.
const [title, setTitle] = useState(props.title);
위 코드에서 useState 는 하나의 인자를 리액트가 주목하고자 하는 변수의 최초 값으로 받고 리스트를 리턴합니다.
리스트에는 변수의 이름과 변수의 값을 업데이트 할 수 있는 함수가 있습니다.

등록한 함수를 사용하여 값을 수정하면 리액트에서 함수 호출시 값을 수정하고 화면을 부분 리렌더링하게 됩니다.

state는 컴포넌트의 인스턴스별로 나뉘어져 있어 독자적인 스코프를 갖기 때문에 같은 컴포넌트를 여러번 호출하더라도 state가 별도로 동작하게 됩니다.