useState 배열 (Message)

메세지가 온 개수에 따른 조건부 렌더링

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [messages, setMessages] = useState(["안녕", "뭐해?"]);

  return (
    <div className="App">
      {messages.length >= 2 ? (
        <h1>{`You have ${messages.length} unread messages`}</h1>
      ) : messages.length === 1 ? (
        <h1>{`You have a unread message`}</h1>
      ) : (
        <h1>{`You're all caught up`}</h1>
      )}
    </div>
  );
}

useState로 배열을 이용해 값을 넣어두고 객체의 길이로 조건부 렌더링을 통해서
배열에 값이 담긴 개수에 따라 다른 렌더링을 시키는 간단한 useState를 배열로 활용하는 방법이다.

useState 객체 (form)

[Javascript] onChange

form을 다루기 전에 onChange 이벤트는 요소의 무언가가 바뀔때마다 호출되는 이벤트이다.
아래의 예제들에서 input 태그의 값이 바뀔때마다 onChange에 event 값을 넘겨서
useState에 저장하고 input태그의 value값을 설정해주어서 useState에 값을 저장할 수 있다.

Form

Input태그들을 Form으로 묶어 useState로 관리하기

import { useState } from "react";

export default function Form() {
  let [formData, setFormData] = useState({
    firstName: "",
    lastName: "",
    email: ""
  });
  console.log(formData);

  function handleChange(event) {
    setFormData((prev) => {
      return {
        ...prev,
        [event.target.name]: event.target.value
      };
    });
  }

  return (
    <form>
      <input
        type="text"
        placeholder="First Name"
        name="firstname"
        onChange={handleChange}
      />
      <input
        type="text"
        placeholder="Last Name"
        name="lastname"
        onChange={handleChange}
      />
      <input
        type="text"
        placeholder="Email"
        name="email"
        onChange={handleChange}
      />
    </form>
  );
}

Form 컴포넌트에서 useState로 formData형 객체를 선언하여 각 input태그마다 값을
바꿀때마다 handleChange함수가 실행되면서 useState에 prev로 받은 각 input태그별 값을 저장하고
useState로 인해 자동으로 페이지가 로딩될때마다 console.log로 formData내의 객체를 출력해보는
간단한 Form이다.

위와같이 form태그 전체를 useState에 값을 저장해가면서 컴포넌트를 자동으로 렌더링 시키는 form 을 완성할 수 있다.