일기장 만들기 되짚어보기

시험 기간 동안 리엑트 공부를 제대로 하지 못했다. 이제 시험이 끝나서 강의를 들으면서 공부했던 내용을 다시 복습하고 다시 알아야 할 점은 기록해 두려고 한다.

 

-깃허브

https://github.com/5hyun/React_Study/tree/main/React_test

 

App.js

-소스 코드

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

const App = () => {
  const [data, setData] = useState([]); //글을 저장한다.
  const dataId = useRef(0); //각 일기에 아이디를 주기 위한 변수

  //async는 항상 Promise만 반환한다.
  const getData = async () => {
    //await은 async 안에서만 사용 가능하고 이 코드가 완료될 때 까지 기다린다.
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
      //밑에 then은 성공적 처리만 한다.
    ).then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime() + 1,
        id: dataId.current++,
      };
    });
    setData(initData);
  };

  useEffect(() => {
    setTimeout(() => {
      getData();
    }, 1500);
  }, []);

  const onCreate = (author, content, emotion) => {
    const created_date = new Date().getTime();
    const newItem = {
      author,
      content,
      emotion,
      created_date,
      id: dataId.current,
    };
    dataId.current += 1; //글이 하나 만들어졌으니까 다음 글을 위해 1을 높인다.
    setData([newItem, ...data]); //추가 하는거라 새로운 글 추가하고 그 전에 있던거 불러온다
  };

  const onRemove = (targetId) => {
    //filter는 조건에 맞는 요소를 모아서 새로운 집합을 만들어 준다
    //따라서 filter를 아래 코드처럼 사용하면 삭제하려는 글 제외하고 새로운 배열로 만들어 준다.
    const newDiaryList = data.filter((it) => it.id !== targetId);
    setData(newDiaryList);
  };

  const onEdit = (targetId, newContent) => {
    setData(
      //map 함수를 사용하면 배열을 순회하면서 그 반환값으로 새로운 배열을 만들 수 있다.
      data.map((it) =>
        it.id === targetId ? { ...it, content: newContent } : it
      )
    );
  };

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

export default App;

 

useRef

https://ko.reactjs.org/docs/hooks-reference.html#useref

Hooks API Reference – React

useRef는 .current 프로퍼티를 사용하여 초기값을 변경할 수 있다.

 

filter 함수

filter 함수는 배열을 순회하면서 조건에 일치하는 요소를 모아 새로운 배열을 반환한다.

 

map 함수

map는 callback 함수를 각각의 요소에 순서대로 불러서 그 함수의 반환값으로 새로운 배열을 만든다.

 

API 활용

  //async는 항상 Promise만 반환한다.
  const getData = async () => {
    //await은 async 안에서만 사용 가능하고 이 코드가 완료될 때 까지 기다린다.
    const res = await fetch(
      "https://jsonplaceholder.typicode.com/comments"
      //밑에 then은 성공적 처리만 한다.
    ).then((res) => res.json());

    const initData = res.slice(0, 20).map((it) => {
      return {
        author: it.email,
        content: it.body,
        emotion: Math.floor(Math.random() * 5) + 1,
        created_date: new Date().getTime() + 1,
        id: dataId.current++,
      };
    });
    setData(initData);
  };

  useEffect(() => {
    setTimeout(() => {
      getData();
    }, 1500);
  }, []);

위 코드에서 API 부분만 따로 가져왔다.

 

API를 가져올 때 async, await을 사용해서 가져와 준다. 

fetch는 HTTP 파이프라인을 구성하는 요청과 응답 등의 요소를 JS에서 접근하고 조작할 수 있는 인터페이스를 제공한다.

then이라는 소비자를 이용하여 성공적 처리만 하도록 만들었다.

 

-useEffect

useEffect 함수는 리엑트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook이다.

useEffect를 사용하지 않아도 되지 않을까 싶어서 지우고 getData()만 했더니 계속 렌더링이 발생하여 감정 점수가 무한정으로 바뀌는 현상이 나타났다.

 

---

DiaryEditor.js

-소스 코드

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를 활용하면 focus를 current로 해줄 수 있다.
          ref={authorInput}
          //value는 초기값이다.
          value={state.author}
          onChange={handleChangeState}
          //handleChangeState를 수정하기 위해서 name을 표시해준다.
          name="author"
          placeholder="작성자"
          type="text"
        />
      </div>
      <div>
        <textarea
          ref={contentInput}
          value={state.content}
          onChange={handleChangeState}
          name="content"
          placeholder="일기"
          type="text"
        />
      </div>
      <div>
        <span>오늘의 감정점수 : </span>
        <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에서의 ref

React의 ref prop는 HTML 엘리먼트의 레퍼런스를 변수에 저장해준다. 예를 들면 버튼을 클릭하면 input 창에 focus를 이동시킬 수 있다.

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}
          value={state.author}
          onChange={handleChangeState}
          name="author"
          placeholder="작성자"
          type="text"
        />

ref를 사용해 inputRef를 생성하고 input에 ref prop를 넘기면 inputRef 객체의 current에 input의 레퍼런스가 저장된다.

이런식으로 current를 활용할 수 있다.

 

---

DiaryList.js

-소스 코드

import DiaryItem from "./DiaryItem";

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

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

export default DiaryList;

---

DiaryItem.js

-소스 코드

import { useRef, useState } from "react";

const DiaryItem = ({
  onRemove,
  onEdit,
  id,
  author,
  content,
  emotion,
  created_date,
}) => {
  const localContentInput = useRef();
  const [localContent, setLocalContent] = useState(content);
  //isEdit가 True로 바뀌면 수정하는 상태이다.
  const [isEdit, setIsEdit] = useState(false);
  //isEdit의 상태를 변화 시켜줄 toggleIsEdit 함수
  const toggleIsEdit = () => setIsEdit(!isEdit);

  //수정 취소
  const handleQuitEdit = () => {
    setIsEdit(false);
    setLocalContent(content);
  };

  //수정 완료
  const handleEdit = () => {
    if (localContent.length < 5) {
      localContentInput.current.focus();
      return;
    }

    if (window.confirm(`${id}번 째 일기를 수정하시겠습니까?`)) {
      //App.js에서 만든 onEdit
      onEdit(id, localContent);
      toggleIsEdit();
    }
  };

  //삭제하기
  const handleClickRemove = () => {
    if (window.confirm(`${id}번째 일기를 정말 삭제하시겠습니까?`)) {
      onRemove(id);
    }
  };

  return (
    <div className="DiaryItem">
      <div className="info">
        <span className="author_info">
          작성자 : {author} | 감정 : {emotion}
        </span>
        <br />
        <span className="date">
          {new Date(created_date).toLocaleDateString()}
        </span>
      </div>
      <div className="content">
        {isEdit ? (
          <textarea
            ref={localContentInput}
            value={localContent}
            onChange={(e) => setLocalContent(e.target.value)}
          />
        ) : (
          content
        )}
      </div>
      {isEdit ? (
        //isEdit가 True면 수정 중인 상태
        <>
          <button onClick={handleQuitEdit}>수정 취소</button>
          <button onClick={handleEdit}>수정 완료</button>
        </>
      ) : (
        //isEdit가 False면 수정 전 상태
        <>
          <button onClick={handleClickRemove}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}
    </div>
  );
};

export default DiaryItem;

 

toLocalDateString 함수

Date 객체의 날짜 부분을 지역의 언어에 맞는 문자열 표현으로 반환한다.