🌏React Hooks (1).useState

const Iteration = () =>{

    const [text, setText] = useState(''); //useState쓰고 Enter치면 import 자동 완성
    const [id, setId] = useState(1); //배열마다 고유한 값 id를 생성해 주기 위해 사용. id의 초기값 1.
    const [lists, setLists] = useState([]);//useState() 안에 배열, 객체, 불린, 스트링, 넘버 모두 담을 수 있음 
  
  //추가 함수.
    const handleClick = () => {
        const newList = [...lists, {id: id, text: text}] //돔을 건드리는 게 아니라 새로운 배열을 만들어서 렌더링 한다.
        setLists(newList)
        setId(id + 1) //id 1씩 증가
        setText("") //input 박스 비워주기
        
    }
  //삭제 함수(filter()사용)
  //해당 id를 제외한, 나머지 id를 가진 엘리먼트로 이루어진 새로운 배열을 만들어 출력
    const remove= (id) => {
        const newList = lists.filter((list)=>{
            return list.id!==id
        })
        setLists(newList)
    }
    
   const handleKeyPress = (e) => {
       if (e.key === "Enter") handleClick(); //Enter 키로 handleCick 함수 실행
    };
    
    return(
       <>
        <div>
            <input 
             value={text} 
             onChange={(e)=>{setText(e.target.value)} //input에 입력된 값을 바로 value값으로 넣어주기. 자주 쓰는 코드.
             onKeyPress={handleKeyPress} 
             />
            <button onClick={handleClick}>추가</button>
        </div>
        <ul>
          {lists.map(({id, text}) => //lists 배열을 <li>태그로 감싸 반복하여 출력.
            <li key={id} 
            onDoubleClick={()=>remove(id)}>//해당 <li>를 더블클릭하면 삭제됨. 
            {id} : {text}
           </li>)}
        </ul>
       </>
    )
}

export default Iteration;

아래 코드는 input태그와 button태그를 form태그로 감싼 버전이다.
이벤트를 주는 방식이 조금 다르다.

import { useRef, useState } from "react";

const Iteration2 = () => {
  const [text, setText] = useState("");
  const [id, setId] = useState(1);
  const [lists, setLists] = useState([]); 
  const inputRef = useRef();



  const handleClick = () => {
    const newLists = [...lists, { id: id, text: text }]; //newLists = [{id:1, text: 조혜진}, ] ...lists :객체의 내용을 모두 "펼쳐서" 기존 객체를 복사
    setId(id + 1);
    setLists(newLists);
    setText("");
    inputRef.current.focus(); //useRef를 사용하여 인풋에 focus 주기
  };

  const remove = (id) => {
    const newLists = lists.filter((list) => list.id !== id); //돔을 직접 건드리는 게 아니라 새로운 배열을 만들어서 렌더링한다.
    setLists(newLists);
  };

  const printList = lists.map(({ id, text }) => (
    <li key={id} onDoubleClick={() => remove(id)}>
      {id} : {text}
    </li>
  ));

  return (
    <>
      <form
          onSubmit={(e) => {
          e.preventDefault(); //새로고침 방지
          handleClick(); //form 태그로 감싸면 버튼을 클릭했을 때, 엔터를 클릭했을 때 submit기능이 실행된다. button에 onClick기능 추가해 함수 실행할 필요 x
        }}>
        <input
          type="text"
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
          ref={inputRef}
        />
        <button>
          추가
        </button>
      </form>
     
      <ul>{printList}</ul>
    </>
  );
};

export default Iteration2;