React diary with crud dev #1
Conversation
|
|
||
| // 일기 추가가 안 되는데 문제가 뭔지 모르겠음. id 문제인가? | ||
| // * Create 기능 | ||
| const handleSubmitDiary = (e) => { |
There was a problem hiding this comment.
event가 일어났을 때 수행되는 함수라서 해당 event를 매개변수로 받아오는 겁니다!
There was a problem hiding this comment.
컴포넌트 분리가 깔끔해서 쉽게 이해할 수 있었습니다!
저도 서둘러 분리해야겠네요...!
프로젝트를 생성해 작업한 후, 구현한 부분만 따로 옮겨 올리는 특별한 이유가 있으신가요?
이 리액트 프로젝트를 배포해보는 건 어떤가요!?
| @@ -1,5 +1,5 @@ | |||
| import "./App.css"; | |||
| import { useState } from "react"; | |||
| import React, { useState } from "react"; | |||
There was a problem hiding this comment.
import 문에 React 가 추가되었네요! React 는 어떤 역할을 하나요?
There was a problem hiding this comment.
제 기억으로는 React 부분이 없을 때 오류가 나는지 시험해 봤던 것 같습니다!
결과는 -> useState는 React 라이브러리의 일부분이기 때문에, React를 가져오지 않고 useState만 사용하면 오류가 발생합니다.
아니면 React 컴포넌트를 사용하기 위해 import React from 'react';를 추가로 선언해야 한다고 합니다. 이 부분은 다시 시험해 봐야 할 것 같습니다!
| }; | ||
|
|
||
| // 기존 일기에 새로운 일기, 날짜 추가 | ||
| setDiaryData((prev) => [...prev, newDiary]); | ||
| setDiaryData((prev) => [newDiary, ...prev]); | ||
| localStorage.setItem("diaryData", JSON.stringify([newDiary, ...diaryData])); |
There was a problem hiding this comment.
localStorage 를 사용해서 일기 데이터를 보존하도록 구현하셨군요.
한 줄 일기장을 만드는 프로젝트에 적합한 방법이라고 생각합니다!
저는 단순히 리액트 상태만 변경되도록 구현했습니다. 새로고침 하면 다 사라져요... localStorage 중요한 키워드 배워갑니다!
| // 전체 삭제 | ||
| const handleRemoveAll = () => { | ||
| setDiaryData([]); | ||
| localStorage.setItem("diaryData", JSON.stringify([])); |
There was a problem hiding this comment.
모든 데이터를 지우는 메서드로 이해했습니다.
localStorage.clear() 라는 메서드도 있던데,
setDiaryData([]);
localStorage.setItem("diaryData", JSON.stringify([]));와의 차이점이 궁금합니다!
There was a problem hiding this comment.
오 그런 방법이 있었네요! 한 줄 일기 앱의 경우에는 localStorage에 저장된 데이터가 어차피 한 종류이기 때문에 그 메서드를 사용해도 될 것 같습니다!
| const List = ({ diaryData, setDiaryData }) => { | ||
| return ( | ||
| <div className="listItems"> | ||
| <div style={{ display: "flex" }}> |
There was a problem hiding this comment.
인라인 방식으로 css 를 설정하신 이유가 궁금합니다!
There was a problem hiding this comment.
css를 안 하고 만들다가 너무 불편해서 배치된 아이템 일부만 보기 편하게 정렬했습니다..!
pr 시작!