인풋 필드, css inline style 상태 관리 연습

전체 코드

import { useState } from "react";

export default function EditProfile() {
  const [isEdit, setIsEdit] = useState(true);
  const [input, setInput] = useState({
    firstName: "",
    lastName: ""
  });

  const handleIsEdit = (e) => {
    e.preventDefault();
    setIsEdit(!isEdit);
  };

  const handleInput = (e) => {
    setInput({
      ...input,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form onSubmit={handleIsEdit}>
      <label>
        First name:{" "}
        <b style={!isEdit ? { display: "inline" } : { display: "none" }}>
          {input.firstName}
        </b>
        <input
          style={isEdit ? { display: "inline" } : { display: "none" }}
          name="firstName"
          type="text"
          value={input.firstName}
          onChange={handleInput}
        />
      </label>
      <label>
        Last name:{" "}
        <b style={!isEdit ? { display: "inline" } : { display: "none" }}>
          {input.lastName}
        </b>
        <input
          style={isEdit ? { display: "inline" } : { display: "none" }}
          name="lastName"
          type="text"
          value={input.lastName}
          onChange={handleInput}
        />
      </label>
      <button type="submit">{isEdit ? "Save" : "Edit"} Profile</button>
      <p>
        <i>
          Hello, {input.firstName} {input.lastName}
        </i>
      </p>
    </form>
  );
}

input field 관리

• e.target.name과 e.target.value를 이용해서 다수의 state를 하나의 객체로 관리할 수 있다.

  const handleInput = (e) => {
    setInput({
      ...input,
      [e.target.name]: e.target.value
    });
  };

 

state를 이용한 CSS inline style 관리

• { } 문법과 삼항연산자를 이용해서 inline style을 효과적으로 관리할 수 있다.
• style={ } 는 객체만 인수로 받으므로, (ex : style={ { display: "none"} } 내부에 && 연산자를 사용하면 안된다.
• && 연산자를 사용할 경우, 좌측 연산자가 참일때 style={ } 내부에 예측할 수 없는 값이 들어가 에러가 나기 때문이다.

<b style={!isEdit ? { display: "inline" } : { display: "none" }}>
// 123