<aside> 💡 세부목표

배열을 이용한 React의 List에 아이템을 동적으로 추가해보기 With React처럼 생각하기

</aside>

리액트에서는 같은 레벨간에 데이터를 주고 받는 것은 불가능하다

이런식으로 전달해야함

• 리액트는 데이터는 위에서 아래로 setData같은 event(사건 ex. create)는 아래에서 위로 올라가는 구조

App.js

onCreate함수는 DiaryEditor에서 호출했을 때 담아간 데이터를 가지고 setData로 설정해줍니다.

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

function App() {

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

  const dataId = useRef(0);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id : dataId.current
    }
    dataId.current += 1;
    setData([newItem, ...data,]) //원래 데이터 를 가져오고 새로운 item은 최상단에 나오도록 함
  }

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate}/>
      <DiaryList diaryList={data}/>
    </div>
  );
}

export default App;

DiaryEditor.js

부모인 App.js에서로부터 onCreate라는 함수를 인자로 받아 저장버튼 클릭 시 데이터를 인자로 담아 onCreate를 호출한다.