[React] 배열을 사용한 일기 데이터 추가, 삭제

위와 같이 생긴 일기를 생성하면서 배열의 데이터 추가, 삭제를 공부해보자

 

일단 이 조그마한 화면을 위해서 5가지의 페이지가 필요하다

1. 이벤트 처리를 담당하는 코드, 2. 화면을 띄워주는 코드, 3. 일기가 몇개인지 알려주는 코드
4. 작성한 글의 내용을 알려주는 리스트 코드 5. css코드

 

그러면 직접 코드를 보면서 알아보자

---

import { useRef, useState } from "react";


const DiaryEditor = ({onCreate}) => {

    const authorInput = useRef();
    const contentInput = useRef();

    const [state, setState] = useState({
        author: "",
        content: "",
        emotion: 1,
    });
    
    const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name]: e.target.value,
        });
    };

    const handleSubmit = () => {
        
        if(state.author.length < 1) {
            authorInput.current.focus();
            return;
        }
        if(state.content.length < 5) {
            contentInput.current.focus();
            return;
        }

        onCreate(state.author, state.content, state.emotion);
        alert("저장 성공!");
        setState({
            author: "",
            content: "",
            emotion: 1,
        })
    }

    return (
        <div className="DiaryEditor">
        <h2>오늘의 일기</h2>
        <div>
            <input 
            ref={authorInput}
            name="author"
            value={state.author} 
            onChange={handleChangeState}
            />
        </div>
        <div>
            <textarea 
                ref={contentInput}   
                name="content"
                value={state.content}
                onChange={handleChangeState}
            />
        </div>
        <div>
            <select name="emotion"
                value={state.emotion}
                onChange={handleChangeState}
            >
                <option value={1}>1</option>
                <option value={2}>2</option>
                <option value={3}>3</option>
                <option value={4}>4</option>
                <option value={5}>5</option>
            </select>
        </div>
        <div>
            <button onClick={handleSubmit}>일기 저장</button> 
        </div>
    </div>
    );
    
};

export default DiaryEditor;

코드가 별거 없는데 꽤 길다

먼저 input하는 코드를 먼저 만들었는데

<input 
            ref={authorInput}
            name="author"
            value={state.author} 
            onChange={handleChangeState}
            />

간단히 이 코드를 보자면 ref는 useRef를 사용하여 input에 접근하게 만들어서 focus함수를 사용했다

alert를 사용해서 경고 문구를 쓸 수 있지만 저렇게 오류 처리하는 방법이 있다

 

다음으로 handleChangeState 함수에 name, value를 입력해 주었다

밑에 같이 코드가 반복되어 함수를 만들어주었다

  const handleChangeState = (e) => {
        setState({
            ...state,
            [e.target.name]: e.target.value,
        });
    };

이 코드를 보면 스프레드 연산자를 사용하여 useState의 기본 값을 넣어주고 

input에서 받은 정보로 setState에 값을 넣어주면 이벤트 처리 완료

const handleSubmit = () => {
        
        if(state.author.length < 1) {
            authorInput.current.focus();
            return;
        }
        if(state.content.length < 5) {
            contentInput.current.focus();
            return;
        }

        onCreate(state.author, state.content, state.emotion);
        alert("저장 성공!");
        setState({
            author: "",
            content: "",
            emotion: 1,
        })
    }

if 구문은 경고문을 처리했고, onCreate를 사용해서 

값을 받아와 저장했다

import './App.css';
import DiaryEditor from './DiaryEditor';
import DiaryList from './DiaryList';
import React, { useState, useRef } from "react";

const App= () => {

  const [data,setData] = useState([]);

  const dataId = useRef(0)

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id : dataId.current
    }
    dataId.current += 1;
    setData([newItem, ...data]);
  }

  const onDelete = (targetId) => {
    console.log(`${targetId}가 삭제되었습니다`);
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };

  return (
    <div className="App">
      <DiaryEditor onCreate={onCreate}/>
      <DiaryList onDelete={onDelete} diaryList={data}/>
      </div>
  );
};

export default App;

먼저 onCreate 함수를 만들고 매개변수에 각 변수를 넣고 날짜 정보는 실시간 정보를 받았다

그리고 ID정보를 중복 안되게 설정했다

그래서 순서를 보자면 <DiaryEditor onCreate={onCreate} />가 실행되고

버튼을 누르면 handleSubmit 함수가 작동하여 변수 정보를 App에 쏴주면 그것을 diaryList={data}에 담아

DiaryList에 넘겨주면

import DiaryItem from "./DiaryItem.js";

const DiaryList = ({onDelete, diaryList}) => {
    console.log(diaryList)
    return (
        <div className="DiaryList">
            <h2>일기 리스트</h2>
            <h4>{diaryList.length}개의 일기가 있습니다.</h4>
            <div>   
            {diaryList.map((it) => (
                <DiaryItem key={it.id} {...it} onDelete={onDelete} /> 
            ))}
        </div>
    </div>
    );
};

DiaryList.defaultProps = {
    diaryList: [],
};

export default DiaryList

여기서 값을 전달받아서 map형태로 데이터를 꺼내고 그것을 DiaryItem에 보내면

const DiaryItem = ({onDelete, author, content, created_date, emotion, id}) => {
    return( 
    <div className="DiaryItem">
        <div className="info">
            <span className="author_info">
                작성자 : {author} | 감정점수 : {emotion}
            </span>
            <br />
            <span className="date">
                {new Date(created_date).toLocaleString()}</span>
        </div>
        <div className="content">{content}</div>
        <button onClick={() => {
            console.log(id);
            if(window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)){
                onDelete(id);
            }
        }}
        >
            삭제하기
            </button>
    </div>
    );
};

export default DiaryItem

다음과 같이 정보들을 넘겨 받아서 처리하게 된다