React_기초다지기_하루정리(util 폴더 이용하기, useNavigate, 특정 객체에 대한 처리 실습)

◼︎React

---

⚑목표 : 홈페이지 구현

---

↓홈페이지 구현 중 내가 기억하고 싶은 개념정리

[이전 페이지 이동하기(useNavigte)]

-> 페이지를 이동한 후에 내가 이전에 사용했던 페이지로 이동하고 싶다면?

import { useNavigate } from "react-router-dom";
// import로 Navigate를 이용해서 이전 블로그에서 작성했듯이!

import MyButton from "../components/MyButton";
import MyHeader from "../components/MyHeader";

const New = () => {
  const navigate = useNavigate();
  return (
    <div>
      <MyHeader
        headText={"새 일기쓰기"}
        leftchild={
          <MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />
        }
      />
    </div>
  );
};

export default New;

• navigate를 선언해주고, 그 변수를 상황에 맞게 넣어줌(클릭 이벤트 발생 시 -1 이전으로 이동시킴)

[날짜 선택 창 생성]

   <section>
          <h4>오늘은 언제인가요?</h4>
          <div className="input-box">
            <input type="date" />
          </div>
   </section>

• section으로 묶은뒤에 input의 type을 date로 해준다 !

[date정보를 원하는 구간 만큼 사용하기]

//date객체를 받아서, xxxx,mm,mm 처럼 데이트를 원하는 만큼 잘라서 사용가능
const getStringDate = (date) => {
  return date.toISOString().slice(0, 10);
};

.
.
.

const [date, setDate] = useState(getStringDate(new Date()));

• date의 여러 정보들을 내가 원하는 부분까지만 잘라서 사용한다. 인덱스는 0부터 ~
  이후, 그 데이터를 내가 원하는 초기값으로 사용할 수 있다.

[특정 id 객체 선택하기]

-> 만약 내가 어떠한 사진을 클릭했을 시에 그에 맞는 어떤 행동을 하고 싶다면,
그 사진에 맞는 id를 넘겨받으면 되지 않을까? 또한 그 넘겨 받은 아이디로
그 아이디에 상태 또한 변경 할 수 있을 것이다.

 //만약

 const emotionList = [
  {
    emotion_id: 1,
    emotion_img: process.env.PUBLIC_URL + `/assets/emtion1.png`,
    emtion_descript: "완전 좋음",
  },
  ......

   const handleClickEmotion = (emotion) => {
    setEmotion(emotion);
  };

  ......

  <div className="input_list_wrapper">
          {emotionList.map((it) => (
             <EmotionItem
              key={it.emotion_id}
              {...it}
              onClick={handleClickEmotion}
              isSelected={it.emotion_id === emotion}
            />
         ))}
   </div>

• 해당 아이디에 정보가 들어왔을 경우 그 아이드를 현재 상태로 변경시켜주고, 그것을 EmotionItem컴퍼넌트로 이동시켜
  원하는 정보로 가공한다.

[EmotionItem.js]

  const EmotionItem = ({
  emotion_id,
  emotion_img,
  emotion_descript,
  onClick,
  isSelected,
}) => {
  return (
    <div
      onClick={() => onClick(emotion_id)}
      className={[
        "EmotionItem",
        isSelected ? `EmotionItem_on_${emotion_id}` : `EmotionItem_off`,
      ].join(" ")}>
      <img src={emotion_img} />
      <span>{emotion_descript}</span>
    </div>
  );
};

export default EmotionItem;

• 이전에 넘겨받은 객체의 정보를 통해 클릭이벤트가 발생된 id를 받아와 그것을 ture, false를 이용해 현재의 상태를 표현할 수 있다.

[특정 객체를 선택하여 수정하기]

• 내가 선택한 객체를 원하는 무언가로 수정하고 싶을떄 어떻게해야할까?
  우선 그 객체의 고유 Id를 알아야 그 선택한 특정 객체만 수정할 수 있다.
  그러면, 어떤 상태가 이전 상태와 다른 상태가 되면, 이를 수정상태로 여기고,
  이것을 새로운 data로 받아주면되는 것이다.
  그리고 나서, 새로운 객체의 정보를 받아 수정 랜더링이 될 떄 마다 업데이트를 해주면된다 !

useEffect(() => {
    if (diaryList.length >= 1) {
      const targetDiary = diaryList.find(
        (it) => parseInt(it.id) === parseInt(id)
      );

      if (targetDiary) {
        setOriginData(targetDiary);
      } else {
        navigate("/", { replace: true });
      }
    }
  }, [id, diaryList]);

  return (
    <div>
      {originData && <DiaryEditor isEdit={true} originData={originData} />}
    </div>
  );
};

• diaryList의 길이가 1보다 클 경우에는 기본 수정조건을 만족시키고, 내가 원하는 객체에 대한
  id를 받아와 그 아이를 현재 사용자가 선택한 객체 id로 data를 넘겨 받은뒤에, isEdit을 통해서
  수정에 대한 유무를 파악해 정보를 받는 state를 변경할 수 있도록 수행하면되는것이다.

  const handleSubmit = () => {
    if (content.length < 1) {
      contentRef.current.focus();
      return;
    }

    if (
      window.confirm(
        isEdit ? "일기를 수정하시겠습니까?" : " 새로운 일기를 작성하시겠습니까?"
      )
    ) {
      if (!isEdit) {
        onCreate(date, content, emotion);
      } else {
        onEdit(originData.id, date, content, emotion);
      }
    }

    navigate("/", { replace: true });
  };

  useEffect(() => {
    if (isEdit) {
      setDate(getStringDate(new Date(parseInt(originData.date))));
      setEmotion(originData.emotion);
      setContent(originData.content);
    }
  }, [isEdit, originData]);

• 위에서 말햇듯 , isEdit의 true, false에 대해서 각각의 조건부를 작성하고,
  만약 isEdit이 false일 경우에는 이전 정보와 다름을 인식하고, 새로운 정보로 업데이트하면된다.

[컴퍼넌트 사용 중 중복코드 처리하기]

const getStringDate = (date) => {
return date.toISOString().slice(0, 10);
};

• a컴퍼넌트와 b컴퍼넌트에서 위 코드를 중복해서 사용한다고 할 경우 비효율적이다.
  이때, utIl이라는 파일을 만들어서 코드를 하나의 import로 불러가지고 사용할 수 있게 만들어준다.

export const getStringDate = (date) => {
  return date.toISOString().slice(0, 10);
};

• util 폴더 안에서 date.js라는 파일을 만든 뒤에 이것을 사용하는 컴퍼넌트에서 import하여 사용하면된다.

import { emotionList } from "../util/emotion";

이번글은 내가 기능 구현하면서 정말 노트에다가 정리하듯이 나중에 비슷한 기능을 구현할 떄 참고하고 싶어, 이러한 방식으로 이번 블로그를 작성해보았다 !