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 - <DiaryWrite.JSX> : addDiary 프롭을 추가해서 Diary.JSX로  입력값 전달

import React, {useState} from 'react'
import '../css/Diary.css'
import Input from './Input'
import Textarea from './Textarea'
import Button from './Button'

function DiaryWrite({addDiary}) {
  const [diaryInput, setDiaryInput] = useState({
    title: '',
    content: ''
  })

  const changeInput = event => {
    setDiaryInput({
      ...diaryInput,
      [event.target.name]: event.target.value
    })
  }

  const submitDiary = event => {
    event.preventDefault()
    addDiary(diaryInput.title, diaryInput.content) //Diary.JSX로 입력값 전달
    setDiaryInput({
      title: '',
      content: ''
    })
  }

  return (
    <div className="writeDiv">
      <h1 className="writeMain">Today Diary</h1>
      <form>
        <div>
          <label>제목</label>
          <Input
            className={'writeTitleInput'}
            type={'text'}
            name={'title'}
            value={diaryInput.title}
            onChange={changeInput}
          />
        </div>
        <div className="writeContentDiv">
          <label>내용</label>
          <Textarea
            className={'writeContentTextarea'}
            name={'content'}
            value={diaryInput.content}
            onChange={changeInput}
          />
        </div>
        <Button
          className={'submitButton'}
          type={'submit'}
          name={'저장'}
          onClick={submitDiary}
        />
      </form>
    </div>
  )
}

export default DiaryWrite

 

coponent - <DiaryBlock.JSX> 

import React from 'react'
import '../css/Diary.css'

function DiaryBlock({title, content, id}) { //title, content, key 추가
  return (
    <div className="blockDiv" key={id}>
      <h4>{title}</h4>
      <p>
        ---------------------------------------------------------------------------------------------
      </p>
      <h4>{content}</h4>
    </div>
  )
}

export default DiaryBlock

 

module - <Diary.JSX> : addDiary 함수 추가, map 함수를 이용해서 생성되는 일기 블록 나타냄

import React, {useEffect, useRef, useState} from 'react'
import DiaryWrite from '../component/DiaryWrite'
import DiaryBlock from '../component/DiaryBlock'

function Diary() {
  const [diary, setDiary] = useState(JSON.parse(localStorage.getItem('Diary')) || [])
  //일기장 리스트(배열)을 생성, localStorage에 값이 있으면 새로고침할 때 값을 가져옴

  const diaryKey = useRef(0) //key 값을 0으로 초기화

  const addDiary = (title, content) => { //일기장 추가 함수
    const newDiary = { //일기에 삽입할 입력값을 지정
      title,
      content,
      id: diaryKey.current
    }
    diaryKey.current += 1 //key 값을 1씩 증가
    setDiary([newDiary, ...diary])
  }

  useEffect(() => { //localStorage에 일기를 추가
    localStorage.setItem('Diary', JSON.stringify(diary))
  })

  return (
    <div>
      <div>
        <DiaryWrite addDiary={addDiary} />
      </div>
      <div>
        {diary.map(diaryDate => { //map 함수를 이용해서 일기 블록 나타냄
          return (
            <DiaryBlock
              key={diaryDate.id}
              title={diaryDate.title}
              content={diaryDate.content}
            />
          )
        })}
      </div>
    </div>
  )
}

export default Diary

 

일기를 작성하면 일기 리스트가 추가, 새로고침해도 일기 그대로 유지