(React) 블로그 만들기 - 게시글 추가하기

우선 state 정의하는 곳에 입력값을 저장할 state 를 생성해주자.

const [input, setInput] = useState("");

그리고 {modal~} 위에 글을 입력할 input 태그를 만들어주자.

 <div>
    <input
      onChange={(e) => {
        setInput(e.target.value);
      }}
    />
    &nbsp;
    <button onClick={addPost}>입력</button>
</div>

onChange~ : input 태그에 값이 변할 때 마다 input state 값을 저장해준다.
addPost : 글을 입력하고 버튼을 누르면 글목록에 글이 추가되는 코드를 가진 함수이다. 아래에서 그 함수를 만들어 보자.

function addPost() {
    if (input.trim() === "" || input === null) {
      alert("글자를 입력해주세요!");
      return false;
    }
    const today = new Date(+new Date() + 3240 * 10000)
      .toISOString()
      .split("T")[0];
    const newPosts = [...posts];
    newPosts.unshift({ 
      title: input,
      date: today,
    });
    setPosts(newPosts);
    const newLiked = [...liked];
    newLiked.unshift(0);
    setLiked(newLiked);
  }

버튼을 눌렀을 때 input값이 공백이면 경고창이 뜨고 함수는 종료된다.
내용이 있을 때만 글이 맨 앞에 추가되고 그 글의 좋아요도 추가해준다.

이제 글을 등록하면 글목록 맨앞에 추가되는 걸 확인할 수 있음.