4. React 리액트 state 및 이벤트 다루기 (feat. 유데미 React 완벽 가이드)

https://www.udemy.com/course/best-react/

【한글자막】 React 완벽 가이드 with Redux, Next.js, TypeScript

이 게시물은 유데미 React 완벽 가이드 강의를 보고 메모를 남기는 게시물 입니다.

---

1. State 

State란 바뀔 수 있는 값이다.

state의 종류

• 클래스형 컴포넌트가 지니고 있는 state
• Hooks로 사용하는 함수형 컴포넌트에서 useState

여기서는 Hooks를 사용하기 때문에 useState를 사용한다.

---

2. State 사용하기

useState를 비구조화 할당을 통해 값을 전달한다.

배열의 첫번째 원소는 현재 상태, 두번째 원소는 상태를 바꾸는 함수이다. (setter 라고 부른다)

아래에서는 useState의 초기값으로 props.title을 주었다. 그럼 배열 첫번째 원소인 title이 props.title을 할당받는다.

기존의 <h2>에서 props.title 값을 출력했는데 이제는 state인 title 값을 가지면된다. 

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

import React, { useState } from "react";

const ExpenseItem = (props) => {
  const [title, setTitle] = useState(props.title); 

  const clickHandler = () => {
    setTitle("Updated!");
    console.log(title);
  };

  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;

# ExpenseItem.js

브라우저에서 확인

여기서 Toilet Paper 가 <h2>의 title 값이다. <button>은 onclick될 때 clickHandler 함수를 호출하는데

clickHandler 함수는 호출되면 setTile을 "Updated!" 라는 값으로 바꾸어준다.

Change Title 버튼을 클릭하면 상태가 바뀌며 Updated! 로 값이 바뀌는걸 알 수있다.

이것이 Hooks로 사용한  useState 사용법이며 state 기초이다.