useState () - 리액트에서 데이터를 업데이트 하는 방법

리액트는 컴포넌트가 그려질 때 한 번만 코드를 읽고 그리기 때문에 변수를 바꿔주는 이벤트를 발생시켰을 때 아무런 변화가 없다.

그래서 재평가를 하기위한 트리거가 있어야한다. 그것이 useState라는 리액트 Hook이다.

 

useState는 컴포넌트 함수에 직접 호출해야한다. (컴포넌트 내의 최상위)

함수 밖이나 컴포넌트 함수 안의 함수에는 호줄 할 수 없다.

import React, { useState } from 'react';
import ExpenseDate from './ExpenseDate';
import './ExpenseItem.css';
import Card from '../UI/Card';

function ExpenseItem(props) {
  const [title, setTitle] = useState(props.title); //초기값 세팅
  const clickHandler = () => { // 이벤트 발생시 실행 되는 함수
    setTitle('Updated!'); // 데이터를 바꾸어주기 위한 함수
  };
  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>
  );
}

위와 같이 훅을 불러오고 초기값과 바뀔 수 있는 데이터를 연결해주면 된다.

 

이렇게 useState를 사용하면 연결시킨 데이터만 재평가가 일어나 상태가 업데이트된다.