React - input으로 입력된 값 state에 저장하기

매우 간단한 블로그를 만드는중 input태그로 글제목을 입력하고 발행버튼을 누르면 새 글이 작성되는 기능을 만들기

  let [title, setTitle] = useState(['나는 화랑이다', '오늘은 목요일', '지금 날씨가 맑아']);

title이란 state에 글 제목들을 저장해놨는데 input태그로 새로운 글 제목을 입력하고 발행버튼을 누르면 새 글이 작성되게 하고자 함.

<동적인 UI만드는 법>
1. HTML, CSS로 디자인 미리 완성
2. UI의 현재 상태 state에 저장
3. state에 따라 UI 바뀌게 작성

먼저 input태그, button태그로 간단한 html, css 디자인 완성.

let [input, setInput] = useState('');

input태그로 입력받은 값을 저장할 state 생성

<input onChange={(e)=>{
        setInput(e.target.value);
      }}></input>
<button onClick={()=>{
      let copytitle = [...title]
      copytitle.push(input);
      setTitle(copytitle)
  }}>글작성</button>

입력받은 값을 e.target.value로 가져와서 setInput이라는 state 변경함수에 저장 후
버튼 클릭시 기존의 title을 저장한 state를 copy해서 복사본에 input값 추가.
-> 이때 문제점 발생
input에 아무것도 입력하지 않아도 글발행이 되는데 이를 막기위해

<button onClick={()=>{
        if(input == "" || input == null || input == undefined) {}
        else {
          let copytitle = [...title]
          copytitle.push(input);
          setTitle(copytitle)
        }
      }}>글작성</button>

if문으로 막음

+추가
<각 글에 날짜데이터 추가하기>
하드코딩으로 날짜를 적어놨던 부분에 동적으로 날짜를 가져와 표현하기 위해
동적인 UI만드는법으로 만들기
1. HTML, CSS로 디자인 만들기는 그냥 span태그 안에 보여줄것임
2. UI현재 상태 state에 저장하기

  let [date, setDate] = useState(getToday);

getToday라는 함수로 날짜데이터를 받아올 것임

function getToday() {
    let now = new Date();
    let todayMonth = now.getMonth() + 1;
    let todayDate = now.getDate();
    let showDate = `${todayMonth}월 ${todayDate}일`
    return showDate;
  }

간단하게 월, 일만 표현하여 return 값으로 showDate를 보내줌
3. state에 따라 UI다르게 표현
하드코딩 했던 부분에 {date}로 그냥 state 변수 넣어주면 끝

출처 : https://codingapple.com/