게시물 추가, 삭제하기

결과

내용

• Add service 버튼을 클릭하고 name을 입력하면, sercice name에 입력값으로 추가됨
• date는 현재시간

코드

//최상위 컴포넌트
const [inputData, setInputData] = useState([]); //alert input에서 입력된 데이터를 갱신해줄 state
  const [check, setCheck] = useState(false); //handleAlert함수에서 조건에 만족하면 true로 바꿀 state
  //import button을 클릭하고 뜨는 alert input의 값을 담을 state
  const [inputs, setInputs] = useState({
    service_name: '',
  });

  const { service_name } = inputs;

  const nextId = useRef(0);

//게시물을 추가함
  useEffect(() => {
    if (check && inputs) {
      //user에 추가할 내용을 기재하고
      const user = {
        id: nextId.current,
        service_name,
        creation_date: today,
      };
      //inputData를 복사하고 user를 추가한다
      setInputData([...inputData, user]);
      nextId.current += 1; //id에 +1을 더해줌
    }
  }, [check]);

  //import button 누르면 실행되는 함수, alert 라이브러리 사용
  const handleAlert = () => {
    swal({
      title: 'Service name',
      content: 'input',
      buttons: ['Cancel', 'Add'],
    }).then(result => {
      const lower = result.toLowerCase();
      const num = result >= 0;

      //값이 소문자이거나 숫자이면 값을 추가함
      if (result === lower || num) {
        //inputs에 입력된 값으로 갱신해주고
        //check를 true로 반환
        setInputs({
          service_name: result,
        });
        setCheck(!check);
        setCheck(true);
      } else {
        swal({
          //라이브러리라서 위치 이동이 어려워 있는 그대로 사용
          title: 'Service name',
          content: 'input',
          buttons: ['Cancel', 'Add'],
          text: 'only lowercase letters and numbers allowed.',
        });
      }
    });
  };

//게시물 삭제
  const onRemove = id => {
    setInputData(inputData.filter(del => del.id !== id));
  };

return(
        <Import
          className="import"
          data={data}
          handleAlert={handleAlert}
          inputData={inputData}
        />
)

//하위 컴포넌트
const Import = ({ data, onRemove, handleAlert, inputData }) => {
 
  return (
    <tbody>
       {/* 사용자가 추가할 게시물 */}
          {inputData.map(user => {
           return (
                <tr key={user.id}>
                <TbodyTd style={{ paddingLeft: '134.5px' }}>
                    {user.service_name}
                  </TbodyTd>
                    <TbodyTd>{user.creation_date}</TbodyTd>
                   <TbodyTd style={{ width: '20px' }}>
                    <TbodyBtn onClick={() => onRemove(user.id)}>
					Delete
					</TbodyBtn>
                    </TbodyTd>
                     </tr>
                    );
                  })}
                </tbody>
  );
};
  

처음코드

//최상위 컴포넌트
const [inputData, setInputData] = useState([]); //alert input에서 입력된 데이터를 갱신해줄 state
 let values = []; //import button을 클릭하고 뜨는 alert input의 값을 담을 변수

      //값이 소문자이거나 숫자이면 값을 추가함
      if (result === lower || num) {
        //inputData에 입력된 값으로 갱신해준다
        setInputData(values.concat(result));
      } 

조건문에서
빈 배열(values)에 입력된 값(result)을 추가해서 inputData에 업데이트하는 방법을 사용했었는데
추가는 되지만 두번째 추가부터 추가가 안되고 이전에 추가된 값에 덮어 씌어졌었다

또한 수정한 코드에서는 조건에 만족하면 check를 true로 바꾸고 싶어서

setInputs({
          service_name: result,
        });
        setCheck(!check);

이렇게 !check를 사용했지만 하나씩 건너뛰면서 추가가 됐고,
setCheck(true)로 사용을 하니까 첫번째 이후로는 추가가 되지 않았다
해서 두개를 함께 썼더니 강제로 true가 되면서 추가가 정상적으로 되었다.