input 응용문제 빈 글 등록시 알림

[정민]

{input === ""? alert('내용을 입력해주세요'): null}

이런 조건문을 적용 시켰더니 적용은 됩니다만 input을 빈칸으로 두고
따봉아이콘을 누를때, 새로고침 할 때 모두 alert 창이 뜹니다.. 어떻게 막을 수 있을까요?
그리고 alert 창이 두번 뜹니다 ㅠ

[codingapple]

재렌더링될 때마다 alert도 실행되어서 그렇습니다
html 중간엔 alert 함수넣고 그러진 않습니다 버튼누를 때 alert 해줍시다

[정민]

function empty() {
 input = input.replace(/\s/gi, "");
if (input === "") {
alert("내용을 입력해주세요");
return false;
} else {
}
}
<button
onClick={() => {
let copy = [...글제목];
 copy.unshift(input);
글수정(copy);
empty();
}}
>
 글등록
</button>


이렇게 alert 함수를 만들고 나니 
버튼을 눌렀을 때 alert이 됩니다만 
빈 input의 데이터도 추가가 되어 제목없는 게시글이 생겨납니다.

onclick 부분에서 배열에 입력하기 전에 경고창을 띄우고 데이터를 추가하지 않도록 수정하면 될 것 같은데
어떻게 해야 할까요?

[codingapple]

onClick 안에 if문 추가해서 
빈칸이면 alert() 해주고 그게아니면 글수정(copy) 해달라고 합시다

[정민]

빈칸이면 alert만 하고 아무런 동작 (글 업로드)을 하지 않게 하려면 알려주신 방법 외에 다른 방법이 있을까요?
계속해서 input 창 안에 빈 문자열이 추가됩니다.

 

[codingapple]

다른 방법은 없습니다 코드는 어떻게 짜셨습니까

[정민]

function App() {
let post = "주변 맛집";
let [글제목, 글수정] = useState([
"맛집 리스트",
"여름 아이템 추천",
"대학교 명소",
 ]);
let [like, likeC] = useState([0, 0, 0]);
let [modal, setModal] = useState(false);
let [title, setTitle] = useState(2);
let [input, setInput] = useState("");
let current = new Date();
let date = `${current.getFullYear()}년${
current.getMonth() + 1
}월${current.getDate()}일`;

function empty() {
 input = input.replace(/\s/gi, "");
if (input === "") {
alert("검색어 입력");
return false;
} else {
}
}

return (
<div className="App">
<div className="black-header">
국내 보안 갤러리

<button className="login-btn">로그인</button>
</div>

{/* 반복문 안에 모달 여닫기, 좋아요 증가 글 삭제 구현 */}

{글제목.map(function (a, i) {
return (
<div className="list" key={i}>
<h4
onClick={() => {
setModal(!modal);
setTitle(i);
}}
>
{글제목[i]}
<span
onClick={e => {
let copy = [...like];
 copy[i] = copy[i] + 1;
 e.stopPropagation();
likeC(copy);
 like.push(0);
}}
>
 👍
</span>
{like[i]}
</h4>

<p>{date}에 작성된 글입니다.</p>
{/* 글삭제 */}
<button
onClick={() => {
let copy = [...글제목];
 copy.splice(i, 1);
글수정(copy);
}}
>
 삭제
</button>
</div>
 );
})}
{/* 인풋 글 등록 */}
<div className="input-title">
<input
type="text"
onChange={e => {
setInput(e.target.value);
}}
/>
<button
onClick={() => {
let copy = [...글제목];
 copy.unshift(input);
글수정(copy);
empty();
 [...글제목].filter(item => item);
}}
>
 글등록
</button>
</div>

{modal === true ? (
<Modal title={title} 글제목={글제목} date={date} />
 ) : null}
</div>
 );
}

코드입니다. 이 질문글과는 별개로  좋아요 갯수 공간 추가하는 질문도 올렸는데 
like.push(0) 부분도 봐주시면 감사하겠습니다

[정민]

안녕하세요 선생님 
input값이 없을 때 추가되는 문제는 해결했습니다.. 제가 어이없는 실수를 한거같아요 ㅋㅋ ㅠㅠㅠ 이거 때문에 3일 이상을 고생했었는데,, 허탈하고 또 뿌듯하네요
그냥 onclick에서 다 해결하면 되는 부분이었는데 
굳이 함수를 만들어서 순서를 더 꼬았네요 
이 부분은 해결 완료 했습니다만 

글 추가 작성시 좋아요 갯수 공간 만드는건 아직 해결하지 못했습니다 
push() 부분을 어떻게 활용하면 될까요?

[글쓴이]

글