React - learn - Reacting to Input with State (input box 사용해보기)

https://react.dev/learn/reacting-to-input-with-state#

Reacting to Input with State – React

 

 

1. input 상태에 따라 시각적으로 상태 식별하기

- 비어있는지, 입력중인지, 제출하는지, 성공했는지, 오류인지를 시각적으로 나타내주

import { useState } from "react";

export default function Form() {
  const [answer, setAnswer] = useState("");
  const [error, setError] = useState(null);
  const [status, setStatus] = useState("typing");

  if (status === "success") {
    return <h1>That's right!</h1>;
  }

  async function handleSubmit(e) {
    e.preventDefault();
    setStatus("submitting");
    try {
      await submitForm(answer);
      setStatus("success");
    } catch (err) {
      setStatus("typing");
      setError(err);
    }
  }

  function handleTextareaChange(e){
    setAnswer(e.target.value)
  }

  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form onSubmit={handleSubmit}>
        <textarea
          value={answer}
          onChange={handleTextareaChange}
          disabled={status === "submitting"}
        />
        <br />
        <button disabled={answer.length === 0 || status === "submitting"}>
          Submit
        </button>
        {error !== null && <p className="Error">{error.message}</p>}
      </form>
    </>
  );
}

function submitForm(answer) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let shouldError = answer.toLowerCase() !== "lima";
      if (shouldError) {
        reject(new Error("Good guess but a wrong answer. Try again!"));
      } else {
        resolve();
      }
    }, 1500);
  });
}

 

 

 

2. 과제1 - css 클래스 추가 및 제거

import { useState } from "react";

export default function Picture() {
  const [isActive, setIsActive] = useState(false);

  let backclassname = "background";
  let pickclassname = "picture";

  if (isActive) {
    pickclassname += " picture--active";
  } else {
    backclassname += " background--active";
  }

  return (
    <div
      className={backclassname}
      onClick={() => {
        setIsActive(false);
      }}
    >
      <img
        onClick={(e) => {
          e.stopPropagation();
          setIsActive(true);
        }}
        className={pickclassname}
        alt="Rainbow houses in Kampung Pelangi, Indonesia"
        src="https://i.imgur.com/5qwVYb1.jpeg"
      />
    </div>
  );
}

 

 

 

3. 과제2 - 프로필 편집

import { useState } from "react";

export default function EditProfile() {
  const [isEdting, setIsEditing] = useState(false);
  const [firstName, setFirstName] = useState("Jane");
  const [lastName, setLastName] = useState("Jacobs");

  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        setIsEditing(!isEdting);
      }}
    >
      <label>
        First name:{" "}
        {isEdting ? (
          <input
            value={firstName}
            onChange={(e) => setFirstName(e.target.value)}
          />
        ) : (
          <b>{firstName}</b>
        )}
      </label>
      <label>
        Last name:{" "}
        {isEdting ? (
          <input
            value={lastName}
            onChange={(e) => setLastName(e.target.value)}
          />
        ) : (
          <b>{lastName}</b>
        )}
      </label>
      <button type="submit">{isEdting ? "Save" : "Edit"} Profile</button>
      <p>
        <i>
          Hello, {firstName} {lastName}!
        </i>
      </p>
    </form>
  );
}

 

---

※ e.stopPropagation() 

- 브라우저에서 특정 이벤트가 발생했을 때, 그 이벤트가 어떻게 상위 또는 하위 요소들에게 전파되는지를 나타낸다.
   - 버블링(Bubbling)

     - 이벤트가 발생한 요소에서 시작하여 상위 요소로 전파되는 방식, 가장 하위 요소에서 시작해 상위로 올라간다.

   - 캡처링(Capturing)

      - 이벤트가 발생한 요소에서 시작하여 하위 요소로 전파되는 방식,  가장 상위 요소에서 시작해 하위로 내려간다.

- e.stopPropagation()을 사용하면 이벤트의 버블링이나 캡처링 단계에서 현재 이벤트를 중단시킨다.

    → 이벤트가 현재 요소에서 더 이상 상위나 하위로 전파되지 않게되는것이다!
    → 특히 중첩된 요소들 중에서 특정 요소에서 이벤트의 처리를 중지하고 싶을 때 유용하다고한다!!

 

※ e.preventDefault(); 는 기본 동작을 막는 데 사용한다!

- 예를 들어서 폼 제출 버튼 클릭 시 폼이 제출되는 것을 막거나, 앵커 태그의 클릭 시 페이지 이동을 막는 데에 활용한다.