1. Diary Input, Block

일기장 작성 컴포넌트, 일기장 블럭 컴포넌트 구현

  -스프레드 연산자(...)로 state 객체 나열

  -저장 버튼을 누르면 작성한 일기장 객체 형태로 출력

 

component

  -Input.JSX

  -Button.JSX

  -Textarea.JSX

  -DiaryWrite.JSX

  -DiaryBlock.JSX

css

  -Diary.css

 

component - <Input.JSX>

import React from 'react'

function Input({className, type, name, value, onChange}) {
  return (
    <div>
      <input
        className={className}
        type={type}
        name={name}
        value={value}
        onChange={onChange}
        required
      />
    </div>
  )
}

export default Input

 

component - <Textarea.JSX>

import React from 'react'

function Textarea({className, name, value, onChange}) {
  return (
    <div>
      <textarea
        className={className}
        name={name}
        value={value}
        onChange={onChange}
        required
      />
    </div>
  )
}

export default Textarea

 

component - <Button.JSX>

import React from 'react'

function Button({type, className, name, onClick}) {
  return (
    <div>
      <button type={type} className={className} onClick={onClick}>
        {name}
      </button>
    </div>
  )
}

export default Button

 

component - <DiaryWrite.JSX> : 스프레드 연산자(...)로 입력값 객체 나열

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

function DiaryWrite() {
  const [diaryInput, setDiaryInput] = useState({ //입력 값 state
    title: '',
    content: ''
  })

  const changeInput = event => { //입력 값 지정
    setDiaryInput({
      ...diaryInput, //diaryInput 객체(title, content)를 나열
      [event.target.name]: event.target.value //객체 이름을 찾아 그 값을 지정
    })
  }

  const submitDiary = event => { //일기 저장
    event.preventDefault()
    setDiaryInput({
      title: '',
      content: ''
    })
    console.log(diaryInput) //작성한 일기를 콘솔 창에 출력
  }

  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

 

Diary.css

.writeDiv {
  border: 1px solid black;
  display: inline-block;
  padding: 20px;
}

.writeMain {
  text-align: center;
}

.writeTitleInput {
  width: 400px;
  height: 30px;
  font-size: 15px;
}

.writeContentDiv {
  margin-top: 20px;
}

.writeContentTextarea {
  width: 400px;
  height: 100px;
  resize: none;
  font-size: 15px;
}

.submitButton {
  margin-top: 20px;
  width: 400px;
  height: 40px;
  font-size: 20px;
}

 

App.js

import React from 'react'
import DiaryWrite from './component/DiaryWrite'

function App() {
  return (
    <div>
      <DiaryWrite />
    </div>
  )
}

export default App

DiaryWrite(일기 쓰기) 컴포넌트 구현

일기를 작성하고 저장 버튼을 누르면 객체 형태로 출력

 

component - <DiaryBlock.JSX>

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

function DiaryBlock() {
  return (
    <div className="blockDiv">
      <h4>제목</h4>
      <p>
        ---------------------------------------------------------------------------------------------
      </p>
      <h4>내용</h4>
    </div>
  )
}

export default DiaryBlock

 

Diary.css

.blockDiv {
  border: 1px solid rgb(211, 211, 211);
  background-color: rgb(211, 211, 211);
  width: 600px;
  padding: 10px;
}

 

App.js

import React from 'react'
import DiaryBlock from './component/DiaryBlock'

function App() {
  return (
    <div>
      <DiaryBlock />
    </div>
  )
}

export default App

 

 

DiaryBlock(일기 블록) 컴포넌트 구현