우선 입력한 일기 값을 저장하기 전에, React
의 컴포넌트 및 데이터 구조에 대해 생각해봐야한다.
현재 만든 react
구조를 확인해보면, 아래와 같다.
react
의 경우 데이터를 위 또는 아래로, 단방향으로만 데이터가 흐르기 때문에 옆으로는 데이터를 오갈 수 없다.
즉 아래처럼, DiaryEditor
에서 데이터를 입력했을 때, 해당 데이터를 바로 DiaryList
에 전달할 수 없다는 것이다.
(요약) 일기 저장
DiaryEditor
에서 새로운 일기가 작성되며,data
값이 추가됨
- 즉item
이 추가됨- 추가된
item
은App
에서DiaryList
로 전달DiaryList
는 추가된item
을 다시 렌더링하여 화면에 나타냄
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(
...
)
}
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;