[React] 리액트에서 데이터 추가하기

🔮 리액트 특징

부모 컴포넌트를 상속받은 자식 컴포넌트는 부모 컴포넌트의 데이터를 사용할 수 있지만 같은 레벨의 컴포넌트는 데이터를 공유할 수 없다. 이를 단방향 데이터 흐름 이라고 한다. 이를 해결하기 위해서는 같은 레벨의 컴포넌트가 공유하고 있는 부모 컴포넌트에 데이터를 넣고 사용하는 것이다. 요런 느낌?
Data는 위에서 아래로 이동하고 Event는 아래에서 위로 이동하게 된다. 이런 방법을 State 끌어올리기 라고 한다.

📐 활용

📍 App.js 수정

앞에서 만들어 놓았던 dummyList는 지우고, useState([])를 사용해야된다.

import './App.css';
import { useState, useRef } from "react";
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';

function App() {
  const [data, setData] = useState([]);

  const dataId = useRef(0);
  const onCreate = (author, content, emotion) => {
    console.log("App.js data", author, content, emotion);
    const created_data = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_data,
      id: dataId.current,
    };
    dataId.current += 1;
    setData([newItem, ...data]);
  };

  return (
    <div className="App">
      <h1>일기장</h1>
      <DiaryEditor onCreate={onCreate}></DiaryEditor>
      <DiaryList diaryList={data}></DiaryList>
    </div>
  )
}

export default App;

📍 DiaryEditor.js에 setData 함수 추가하기

import { useRef, useState } from "react";

const DiaryEditor = ({ 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); // 🌟 Event
    alert("저장 성공");
  };

📍 Event 처리 진행 과정

1. 사용자 입력
2. 버튼 클릭
3. DiaryEditor.js에 handleSubmit 함수 호출 -> onCreate함수를 호출, alert
4. App.js로 매개변수가 전달됨 -> setData함수를 통해서 data로 값 전달
5. App.js에서 DiaryList에 매개변수로 data를 전달해주었으므로 그 data를 랜더링함.

📐 저장 완료 후 작성 폼 초기화하기

//DiaryEditor.js
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); //Event
  alert("저장 성공");
  // 🌟 일기 작성 폼 데이터 초기화
  setState({
    author: "",
    content: "",
    emotion: 1,
  });
};

🌗 결과 ^^