React에서 배열 사용하기 2 - 데이터 추가하기

React의 상태인 State를 Editor와 List의 공통 부모를 끌어올려서 해결할 수 있다. DiaryEditor, DiaryList 컴포넌트의 공통 부모인 App 컴포넌트가 일기 데이터를 State로 배열 형식으로 가지고 있고, 이 데이터 State의 값을 DiaryList에게 전달하면서, 리스트를 렌더링하게 하고, [data]라는 State를 변화시킬 수 있는 상태 변화 함수인 setData 상태 변화 
함수를 DiaryEditor 컴포넌트에게 Props으로 전달해주기만 하면 된다. 

 

 

<App.js>

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



function 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;
    // 원래 배열에 있던 data를 하나씩 나열(...data) 
    setData([newItem,...data])
  };

  return ( // State는 DiaryList로 사용되기 때문에, Props로 data 내려준다.
    <div className="App">
      <DiaryEditor onCreate ={onCreate} />
            <DiaryList diaryList = {data}/> 
    </div>
  );
}

export default App;

다이어리 에디터, 다이어리 리스트 컴포넌트가 함께 사용할 일기 데이터를 State로 가지고 있고, 일기 데이터는 빈 배열로 시작( 없는 상태로)

일기 상태 변화 함수 - setData

다이어리 리스트한테는 현재 앱 컴포넌트가 가진 일기 배열 data의 State를 넘겨주기만 하면 된다. 그러면, 
앱 컴포넌트가 가진 data State가 바뀌면, 다이어리 리스트도 알아서 다시 렌더를 하게 되고 다이어리 에디터 컴포넌트가작성하면 밑에 반영이 될 수 있도록 만들어야 하는데, 이렇게 만드려면 앱 컴포넌트의 data 상태를 변화시키면 되는 것. 

data가 바뀌면 이걸 사용하는 DiaryList의 data도 바뀌는 것. 

 

새로운 일기를 만드는 onCreate함수 추가. ( ) 안에 있는 내용을 전달받는다. 

 

<DiaryEditor.js>

import React, {useRef, useState } from "react";

const DiaryEditor = ({onCreate}) => { // onCreat 함수를 Props으로 전달 받음

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

    const [state, setState] = useState({
        author:"",
        content:"",
        emotion:1,  
    });

    const handleChangeDiary = (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;
        }
        // Props로 받은 onCreate 호출
        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"
            type="text"
            value={state.author} 
            onChange={handleChangeDiary}
            />
        </div>
        <div>
            <textarea 
            ref = {contentInput}
            name = "content"
            type = "text"
            value = {state.content}
            onChange={handleChangeDiary}
        /></div>
        <div>
            <span>오늘의 감정점수 : </span>
            <select name = "emotion" 
            value={state.emotion} 
            onChange={handleChangeDiary}>
                <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;

onCreate함수를 App 컴포넌트로부터 Props로 받아서 HandleSubmit --> 일기 저장이 일어났을 때 onCreate함수를 호출한다. 호출하면서 현재 컴포넌트가 가지고 있는 (state. 인자)들을 newItem쪽으로 전달을 해주고,  
dataId를 1증가시켜 주고, setData를 호출한다. (가장 위로 배열이 들어갈 수 있도록 함. 최신순!)

 

<DiaryItem.js>

 

const DiaryItem = ({author, content, created_date, emotion, id}) => {
    return( 
    <div className = "DiaryItem">
    <div className = "info">
        <span>
            작성자 : {author} | 감정 점수 : {emotion}
        </span>
        <br />
        <span className = "date">{new Date(created_date).toLocaleString()}</span> 
    </div>
    <div className="content">{content}</div>
    </div>
    );
};

export default DiaryItem;

<DiaryList.js>

import DiaryItem from './DiaryItem';

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

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

export default DiaryList;