[React] useState 입력 값을 이용하여 배열 렌더링

여러 객체 받을 때

useState 데이터가 많을 때 하나씩 만드는 것보다 가능하면 객체로 담아서 한번에 돌릴 수가 있다.

모두 똑같은 change 이벤트를 주고 아래처럼 코드 작성

const [inputs, setInputs] = useState<inputsType>({
    id: uuidv4(),
    gender: "woman",
    height: "",
    title: "",
    content: "",
});
  
const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputs({
        ...inputs,
        [e.target.name]: e.target.value,
    });
};

 

여러 객체 필터링

객체 안에 특정 내용만 넣고 뺄 때 선택된 값을 찾아서 아래처럼 보여줄 수 있다

  const toggleActive = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    const selectTag = e.currentTarget.innerText;

    if (e.currentTarget.classList.contains("active")) {
      e.currentTarget.classList.remove("active");
      // 리스트에서 뺄 때
      setTags((tag) => tag.filter((item) => item !== selectTag));
    } else {
      e.currentTarget.classList.add("active");
      // 리스트에서 추가할 때
      setTags([...tags, selectTag]);
    }
  };