[React] 블로그 제작(4): 공백 입력 방지하기

input 박스에 원하는 글 제목을 입력하면 새로운 글 제목을 발행해주는 기능을 만들었었는데, 이 때 텍스트 없이 공백만으로도 글 제목을 발행이 되는 오류가 있었다.

오늘은 이 오류를 제거하고 글 제목을 입력하라는 에러 메세지 팝업을 띄울 것이다.

🖥 최종 출력 화면:

📍 공백 입력 방지 조건문 작성하기

조건문 코드를 작성하기 전에 생각을 그대로 적어보면

if input에 공백이 들어올 시, 에러메세지 뜨게하기 
else 공백이 아닌 값이 들어올 시, 새로운 글 제목 발행하기 

이 뼈대를 토대로 코드를 작성한다.

4.
<button className='ibutton' onClick={() => {
	if (input.length === 0){ setPopup(true) }
    else {
         let newTitle = [...title];
         newTitle.unshift(input); //여기서 input은 e.target.value을 저장한 state 변수
         setTitle(newTitle);
          }}}> 발행하기 </button>

📍 공백을 입력 받았을 때 에러메세지 출력하기

이전에 Modal 창을 만들었던 방식을 이용하여서 만들어보았다.
1. 에러 메세지 창 디자인하기

1. //클릭할 시, popup의 현재 상태의 반대가 되면서 창이 닫히도록 설정했다.
function Popup(props) {
  return(
    <div className='errormsg' style = {{color:"white"}} onClick={() => {
      	props.setPopup(!props.popup)}}>
      	<p><BsFillExclamationTriangleFill/> 제목이 입력되지 않았습니다.</p>
    </div>
  )
}

2. UI의 현재 state 정의하기

2. //현재는 닫혀있는 상태
let [popup, setPopup] = useState(false);

3. state에 따라 UI가 어떻게 보일지 조건문 작성하기

{ 3. //popup state가 true이면 팝업 열림, false이면 닫힘
  popup ? <Popup popup = {popup} setPopup = {setPopup}/> : null
}

4. 부모 컴포넌트에 있는 조건문에 연동시키기

4. //input으로 받아온 텍스트 길이가 0이면 팝업 state가 true로 바뀜
if (input.length ===0) {setPopup(true)}

⌨️ 전체 코드

function App() {
  let [title, setTitle] = useState(['[React] JSX 기초 문법', '[React] state 문법', '[React] props 문법']);
  let [input, setInput] = useState('');
  let [popup, setPopup] = useState(false); //2.
  
  return (
     <div className="App">
    	 <div className='newlist'>
        	<input placeholder="글 제목을 입력하세요" onChange={(e) => {
          	setInput(e.target.value)}}>
        	</input>
        	<button className='ibutton' onClick={() => { //4.
          		if (input.length === 0){setPopup(true)}
          		else {
            		let newTitle = [...title];
            		newTitle.unshift(input); 
            		setTitle(newTitle);
          			}
        	}}> 발행하기 </button>
      	</div>
	</div>

        { //3.
          popup ? <Popup popup = {popup} setPopup = {setPopup}/> : null
        }
);}

function Popup(props) { //1.
  return(
    <div className='errormsg' style = {{color:"white"}} 
  		onClick={() => {props.setPopup(!props.popup)}}>
      	<p><BsFillExclamationTriangleFill/> 제목이 입력되지 않았습니다.</p>
    </div>
  )
}