53. "useState" 훅 자세히 살펴보기

코드에서 아래와 같이 ExpenseItem이 여러 번 호출되어 있어도 
각 컴포넌트마다의 state 리액트 메모리 안에서 독립적으로 관리된다 

import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
function Expenses({ items }) {
  return <div className="expenses">
    <ExpenseItem title={items[0].title} amount={items[0].amount} date={items[0].date} id={items[0].id} />
    <ExpenseItem title={items[1].title} amount={items[1].amount} date={items[1].date} id={items[1].id} />
    <ExpenseItem title={items[2].title} amount={items[2].amount} date={items[2].date} id={items[2].id} />
    <ExpenseItem title={items[3].title} amount={items[3].amount} date={items[3].date} id={items[3].id} />
  </div>
}

export default Expenses;

 

그렇다면 useState를 사용할 때 const 상수를 사용하는 이유는? 
const 라면 값의 변경이 불가능한 것 아닌가 생각할 수 있지만 그것은 = 등호를 이용해서 값을 할당하려고 했을 때의 이야기이다. 여기에서는 setter와 같은 방식으로 값이 재할당 되기 때문에 const 상수 여부는 관련이 없다. 

state가 업데이트 되면 재실행된다

 const [title, setTttle] = useState(props. Title);

이 함수에서 title은 state를 관리하는 리액트에서 가져온 것이다

"관리하라고 했던 최신 title 값을 줘"

useState는 "현재 상태 값, 업데이트 함수" 를 가진다.