State 및 이벤트 다루기

이벤트 설정하기

• export default function App() {
    const output = () => {
      console.log("Stored!");
    };
    return <button onClick={output}>Bookmark</button>;
  }

"State"와 함께 일하기

• import React, {useState} from 'react';
• 반드시 컴포넌트 함수 안에 넣기

import React, { useState } from "react";

export default function App() {
  // [value, function] = useState(초기값);
  const [price, setPrice] = useState("$100");
  const change = () => {
    setPrice("$75");
  };

  return (
    <div>
      <p>{price}</p>
      <button onClick={change}>Apply Discount</button>
    </div>
  );
}

useState Hook 자세히 살펴보기

• setTimeout() 활용 가능하다.

사용자 입력 수신하기

• function(event.target.value)

대신 상태 하나 사용하기 (더 좋은 점)

const [enteredTitle, setEnteredTitle] = useState("");
const [enteredAmount, setEnteredAmount] = useState("");
const [enteredDate, setEnteredDate] = useState("");

// 위에를 한번에 줄여 사용할 수 있다.
const [userInput, setUserInput] = useState({
  enteredTitle: "",
  enteredAmount: "",
  enteredDate: "",
});

const titleChangeHandler = (event) => {
  setEnteredTitle(event.target.value);
};

const titleChangeHandler = (event) => {
  setEnteredAmount(event.target.value);
};

const titleChangeHandler = (event) => {
  setEnteredDate(event.target.value);
};

// 기존에 위에 작성도 바뀌어야 한다.
const titleChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredTitle: event.target.value,
  });
};

const amountChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredAmount: event.target.value,
  });
};

const dateChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredDate: event.target.value,
  });
};

이전 상태에 의존하는 상태 업데이트하기

익명함수 사용 (() => {});

const titleChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredTitle: event.target.value,
  });
};

const amountChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredAmount: event.target.value,
  });
};

const dateChangeHandler = (event) => {
  setUserInput({
    ...userInput,
    enteredDate: event.target.value,
  });
};

// 상태 업데이트하기
const titleChangeHandler = (event) => {
  setUserInput((prevState) => {
    return { ...prevState, enteredTitle: event.target.value };
  });
};

const amountChangeHandler = (event) => {
  setUserInput((prevState) => {
    return { ...prevState, enteredAmount: event.target.value };
  });
};

const dateChangeHandler = (event) => {
  setUserInput((prevState) => {
    return { ...prevState, enteredDate: event.target.value };
  });
};

• 다수의 상태 업데이트를 동시에 예약할 경우 오래되었거나 잘못된 상태 스냅샷에 의존하게 될 수 있다.
• 하지만 마지막 방법을 사용하게 되면 리액트가 이 내부 함수에서 제공하는 상태 스냅샷이 항상 최신 상태 스냅샷이 되도록 보장해 줍니다.
  • 예약된 모든 상태 업데이트를 기억하고있기 때문.
• 그렇기 때문에 이전 상태에 의존해 상태를 업데이트할 때는 이 함수 문법을 사용해야 한다는 것이다.

이전 상태에 의존해 상태를 업데이트 하는 경우에는 아래와 같은 함수 양식을 사용하자!

연습: 양식 입력에 상태 사용하기

문제: 입력한 문자 메시지가 유효한 경우(예를 들어 길이가 3 글자 이상인 경우) 입력 필드 아래에 "Valid message" 라는 텍스트가 표시됩니다. 유효하지 않은 경우(즉, 3 글자보다 짧은 경우) "Invalid message"라는 텍스트가 표시되어야 합니다.

import React, { useState } from "react";

import "./styles.css";

// don't change the Component name "App"
export default function App() {
  const [valid, setValid] = useState("Invalid");

  const messageChangeHandler = (event) => {
    if (event.target.value.length < 3) {
      setValid("Invalid");
    } else setValid("Valid");
  };

  return (
    <form>
      <label>Your message</label>
      <input type="text" onChange={messageChangeHandler} />
      <p>{valid} message</p>
    </form>
  );
}

연습: 이전 상태를 기반으로 상태 업데이트하기

문제: "증가" 버튼을 클릭할 때마다 증가하는 기본 카운터를 만드는 것입니다.

import React, { useState } from "react";

import "./styles.css";

// don't change the Component name "App"
export default function App() {
  const [plusCounter, setPlusCounter] = useState(0);

  const plusCounterHandler = () => {
    setPlusCounter((plusCounter) => plusCounter + 1);
  };

  return (
    <div>
      <p id="counter">{plusCounter}</p>
      <button onClick={plusCounterHandler}>Increment</button>
    </div>
  );
}