React의 단방향데이터와 역방향이벤트의 흐름

리액트의 구조

일반적으로 react는 형제 컴퍼넌트끼리는 데이터를 전달 할 수 없다.따라서 root 컴퍼넌트에서 data를 단방향으로 전달해야 한다.렌더링 할 때도 마찬가지다. 즉, 부모 컴퍼넌트에서 이벤트 발생하면 데이터 렌더링한 후 데이터를 다시 부모 컴퍼넌트에 전달하는 방식이다.

useState 함수에 관하여

set 메소드는 기본적으로 callback 함수를 가지고 있는데 기본적으로 그 전의 상태 값을 가지고 있다.

/*App.tsx*/
export type Info = {
  id:number,
  autor:string,
  content:string,
  emotion:number
  createDate:number
};

export type myCreate = (autor:string,content:string,emotion:number)=>void;

function App() {
  const  dataId = useRef(0);
  const [data,setData] = useState<Info[]>([]);
  const onCreate:myCreate =(autor:string,content:string,emotion:number)=>{
    const createDate = new Date().getTime();
    const newItem ={
      autor,
      content,
      emotion,
      createDate,
      id:dataId.current,
    };
    dataId.current+=1;
    setData((prev)=>[newItem,...prev]);
  };// 이벤트 발생시 root component로 데이터 전달 

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate}/>
      <DiaryList setList={data}/>
    </div>
  );// data를 DiaryList로 전달
}