[React] 더미데이터가 아닌 내가 작성하고 등록한 일기장 내용으로 List 출력하기

 

이벤트는 props 를 사용해서 아래에서 위로

데이터는 위에서 아래로

 

 

 

 

 

 

---

 

  const [data,setData] = useState([]);

data를 관리할 전역 state를 선언해준다.

기존 더미데이터를 주석 처리해주고 

 

 

onCreate 라는 일기데이터를 추가할 함수를 만들어준다.

작성자, 내용, 감정등의 내용을 onCreate함수가 받아서 ssetData를 이용해 data업데이트를 해줄것이다.

 

 

  const onCreate = (author,content,emotion)=>{
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date
    }
  };

새로운 일기 값을 받아올 수 있도록 파라미터를 넣어준 후 new Item에 들어갈 객체정보도 선언해줬다.

 

그리고 id도 추가해줘야하지만

더미데이터때처럼 키를 넣는게아닌

 

useRef를 사용해줄 것 이다

 

import React, {useState, useEffect, useRef} from 'react';

useRef를 import 한 후 

id가 1씩증가되게 해주었고

setData안에 원래데이터를 전개연산자를 적어주고, newItem을 추가해준다.

 

 

 

 

 

 

DiaryEditor 수정

 

DiaryEditor컴포넌트로 가서 onCreate함수를 prop으로 전달

 

 

 

 

 

 

 

        if(state.author.length < 1){
            authorInput.current.focus();
            return;
        } 

        if(state.content.length < 5){
            contentInput.current.focus();
            return;
        }

        onCreate(state.author, state.content, state.emotion);
        alert("저장 성공");
    }

 

DiaryEditor내  조건판별 후 저장하는 handleSubmit 함수에서 onCreate 호출해준다

 

 

 

 

 

 

 

 

 

다만 아직은 작성 완료후에도 작성한 글 내용이 남아있다

 

 

 

    const handleSubmit = ()=>{
        if(state.author.length < 1){
            authorInput.current.focus();
            return;
        } 

        if(state.content.length < 5){
            contentInput.current.focus();
            return;
        }

        onCreate(state.author, state.content, state.emotion);
        alert("저장 성공");
        setState({
            author: "",
            content: "",
            emotion: 1
        })
    }

그래서 저장성공 후에는 setState를 통해 일기작성 포맷을 초기화 시켜준다

 

 

 

 

 

그럼 이제 작성완료 이후 다시 기본값으로 초기화 된 모습을 볼 수 있다

 

 

 

 

 

 

 

 

 

 

---

리스트 정렬순서

    setData([...data, newItem]);
    
    
    setData([newItem, ...data]);

 

App컴포넌트의 setData로 글순서를 정방향, 역방향으로 흐름을 설정할 수 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

참고:

- 한 입 크기로 잘라먹는 리액트