개인 공부/게시판9 5. 카테고리, 작성 날짜 카테고리 별로 일기 표시, 작성한 날짜와 시간을 표시 ※select, option 태그로 카테고리를 분류 (미분류, 일상, 공부, 여행, 게임) ※일기 작성 시 입력 칸 비어있고, 카테고리가 지정되어있지(미분류) 않을 시 경고문 출력 ※각 일기마다 name(value)를 지정해서 카테고리를 분류 ※일기를 작성한 날짜를 표시 ※각 카테고리 버튼을 클릭 시 각 카테고리에 속한 일기만 보여줌 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX -Category.JSX -CategoryButton.JSX module -Diary.JSX css -Diary.css -Category.css component - : select.. 2024. 1. 31. 4. EditDiary 일기장을 수정 ※true, false에 따라 수정 textarea, 수정/적용 버튼 나타내기 ※ map 함수를 이용해 지정한 id에 content만 변경 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css component - : 수정 textarea 나타내기 import React, {useState} from 'react' import '../css/Diary.css' import Button from './Button' import Textarea from './Textarea' function DiaryBlock({title, content, id, .. 2024. 1. 29. 3. DeleteDiary, diaryKey 값 유지 일기장 삭제, 새로고침 diaryKey 값 초기화 되지 않고 저장 ※ filter 함수를 이용해서 일기 삭제 -filter() : 주어진 함수의 조건을 만족하는 배열의 요소들만 모아(true면 유지, false면 버림) 새로운 배열로 반환함. ※ diaryKey이 중복되지 않도록 localStorage에 diaryKey 저장 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css component - : 클릭하면 일기 삭제 import React from 'react' import '../css/Diary.css' import Button from './Butt.. 2024. 1. 29. 2. AddDiary 일기장을 리스트에 새로 추가 ※addDiary 함수 추가 ※map 함수를 이용해서 생성되는 일기 블록 나타냄 -map(): 반복되는 컴포넌트를 렌더링 ※useRef 훅으로 일기 key 값 설정 -useRef : DOM에 접근하기 위해 사용 component -Input.JSX -Button.JSX -Textarea.JSX -DiaryWrite.JSX -DiaryBlock.JSX module -Diary.JSX css -Diary.css coponent - : addDiary 프롭을 추가해서 Diary.JSX로 입력값 전달 import React, {useState} from 'react' import '../css/Diary.css' import Input from './Input' import Text.. 2024. 1. 29. 이전 1 2 3 다음
