[React] 입력값 저장

✔️React의 컴포넌트 및 데이터 구조 확인

우선 입력한 일기 값을 저장하기 전에, React의 컴포넌트 및 데이터 구조에 대해 생각해봐야한다.

현재 만든 react구조를 확인해보면, 아래와 같다.

react의 경우 데이터를 위 또는 아래로, 단방향으로만 데이터가 흐르기 때문에 옆으로는 데이터를 오갈 수 없다.

즉 아래처럼, DiaryEditor에서 데이터를 입력했을 때, 해당 데이터를 바로 DiaryList에 전달할 수 없다는 것이다.

(요약) 일기 저장

• DiaryEditor에서 새로운 일기가 작성되며, data값이 추가됨
  - 즉 item이 추가됨
• 추가된 item은 App에서 DiaryList로 전달
• DiaryList는 추가된 item을 다시 렌더링하여 화면에 나타냄
  

---

✏️구현코드 (일부)

App.js

function App() {
  //기존에 저장되어있는 data
  const [data, setData] = useState([]);

  const dataId = useRef(0)

  //onCreate: 입력한 값에 대한 newItem 정의
  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author, content, emotion, created_date,
      id: dataId.current
    }
    dataId.current += 1
    //기존 데이터의 위에 새로운 data 추가 -> data 값 갱신
    setData([newItem, ...data])
  }
  return(
    ...
  )
}

DiaryEditor.js

import { useRef, useState } from "react";

const DiaryEditor = ({ onCreate }) => {
    const authorInput = useRef();
    const contentInput = useRef();

    const [state, setState] = useState({
        author: "",
        content: "",
        emotion: 1
    })

    const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name]: e.target.value
        })
    }
    const handleSubmit = () => {
		...
        }
        //data 추가 시, 저장성공 메시지 뜬 후
        //input 부분이 리셋됨
        onCreate(state.author, state.content, state.emotion)
        alert("저장 성공!")
        setState({
            author: "",
            content: "",
            emotion: 1
        })
    }

    return (
        <div className="DiaryEditor">
            <h2>오늘의 일기장</h2>
            <div>
      			//각 input 부분에 handleChangeState
                <input
                    ref={authorInput}
                    name="author"
                    value={state.author}
                    onChange={handleChangeState}
                />
            </div>
            <div>
                <textarea
                    ref={contentInput}
                    name="content"
                    value={state.content}
                    onChange={handleChangeState}
                />
            </div>
            <div>
                <span>오늘의 감정점수: </span>
                <select
                    name="emotion"
                    value={state.emotion}
                    onChange={handleChangeState}
                >
                    ...
        </div>
    );
};
export default DiaryEditor;