🟦 [React] trim(), 기존 useState에 배열 추가하기

✔ input에 작성하고 '행 추가' 버튼을 누르면 행이 추가 되게 하라!

-> btnAdd 함수가 구이름 배열에 새로운 값(사용자가 입력한 값)을 추가하고, 그에 따라 Div가 갱신되도록 해야 함
 

코드 👇

import { useState, useEffect } from 'react'
import './App.css'

function App() {
  let [구이름, 구이름변경] = useState(['강남구', '송파구', '서초구']);
  let [like, setLike] = useState([0, 0, 3]);
  let [입력값, 입력값변경] = useState('');

  useEffect(() => {
    console.log(like);
  }, [like])

  // 행 추가 함수
  const btnAdd = () => {
    if (입력값.trim() === '') {
      return; // 입력값이 비어있을 때는 아무 것도 추가하지 않음
    }
    const 구이름추가 = [...구이름, 입력값]; // 기존 구이름 배열에 새 값 추가
    구이름변경(구이름추가); // 상태 업데이트하여 새로운 배열로 변경
    입력값변경(''); // 입력값 초기화
  };

  return (
    <>
      <div>
        {구이름.map((a, index) =>
          <Div key={index}
            index={index}
            구이름={구이름}
            like={like[index]}
            setLike={setLike}
          />
        )}
      </div>

      <input
        type="text"
        value={입력값}
        onChange={(e) => 입력값변경(e.target.value)} // 입력값 상태 업데이트
      />
      <button onClick={btnAdd}>행 추가</button>
    </>
  )
}

function Div({ index, 구이름, like, setLike }){
  const likeCount = (e) => {
    e.stopPropagation();
    setLike((prevLikes) => {
      const updateLikes = [...prevLikes];
      updateLikes[index] = updateLikes[index] + 1;
      return updateLikes;
    })
  };
  return(
    <>
      <div style={{ marginTop: '10px' }} onClick={() => { console.log(5); }}>
        <span>{구이름[index]}</span>
        <button onClick={likeCount}>💙 <span>{like}</span></button>
      </div>
    </>
  )
}

export default App;

 

결과 👇

 
 
근데 이제 하트를 누르면 작동하는 동작은 아직 손을 못봤다!!!
일단 1차 목표는 이루었다!
 
 
 
다음 글에서 .. ㅎㅐ결 해보도록..

 

🟦 [React] trim(), 기존 useState에 배열 추가하기 2