08. react_blog(test)

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

function App() {
  let [content, setContent] = useState([
    "남자코트추천",
    "여자코트추천",
    "엄마코트추천",
  ]);
  let [good, setGood] = useState([0, 0, 0]);
  let [input, setInput] = useState("");
  const titleInputRef = useRef();
  // useEffect(() => {

  // }, [input]);
   const addGoodBtn = () => {
    let goodCopy = [...good];
    goodCopy.unshift(0);
    setGood(goodCopy);
  };
  const addContent = () => {
    addGoodBtn();
    if (input == "") {
      return titleInputRef.current.focus();
    } else {
      setInput("");
    }
    let copy = [...content];
    copy.unshift(input);
    setContent(copy);
    // return input == "" ? titleInputRef.current.focus() : setInput("");
  };

  const goodBtn = (i) => {
    let copy = [...good];
    copy[i]++;
    setGood(copy);
  };
  const deleteContent = (i) => {
    let copy = [...content];
    copy.splice(i, 1);
    setContent(copy);
  };
  const changeContent = (i) => {
    let copy = [...content];
    copy[i] = "수정한 콘텐츠";
    setContent(copy);
  };
  return (
    <div className="App">
      {content.map((a, i) => {
        return (
          <div className="content" key={i}>
            <h1>
              {content[i]}

              <button
                onClick={() => {
                  goodBtn(i);
                }}
              >
                👍🏻
              </button>
              <span>{good[i]}</span>
            </h1>
            <p>2월 17일 발행</p>
            <button
              onClick={() => {
                deleteContent(i);
              }}
            >
              글 삭제
            </button>
            <button
              onClick={() => {
                changeContent(i);
              }}
            >
              글수정
            </button>
          </div>
        );
      })}
      <input
        className="blank"
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
        ref={titleInputRef}
      ></input>
      <button
        onClick={() => {
          addContent();
        }}
      >
        글발행
      </button>
    </div>
  );
}

export default App;

좋아요 > 글추가 > 글 삭제 > 글 수정 (12.27)> 모달 > 정렬 구현

2022.12.27

01. 좋아요 기능

👍🏻 버튼을 누르면 좋아요 증가

(1) state에 변수 저장

let [good, setGood] = useState([0, 0, 0]);

(2) goodBtn 함수로 좋아요 수 증가 시키기

- 기존의 state를 변경하기 보단 변수에 저장해놓고 사용

- [...] 으로 배열 벗긴 후 copy에 저장

 [...] 배열을 스프레드 연산자로 copy 하는 이유는 : 배열을 그냥 가져다 복사해버리면 두개가 변경되어버린다.(얕은 복사)

완전히 똑같은 배열을 하나 더 만들어서 따로 동작하게 하는 것이 (깊은 복사) [...] 이 방식이 깊은 복사

  

- i 번째 state에 +1

- state 변경함수에 증가 된 좋아요 수 대입

  const goodBtn = (i) => {
    let copy = [...good];
    copy[i]++;
    setGood(copy);
  };

 

(3)onClick으로 함수 실행

         {content.map((a, i) => {
        return (
          <div className="content" key={i}>
            <h1>
              {content[i]}

              <button
                onClick={() => {
                  goodBtn(i);
                }}
              >
                👍🏻
              </button>
              <span>{good[i]}</span>
            </h1>
            <p>2월 17일 발행</p>
          </div>
        );
      })}

 

 

02. 글 추가 기능

input에 내가 작성한 글 리스트에 작성

 

(1) input에 작성한 내용 state에 변수 저장

  let [input, setInput] = useState("");

(2) 좋아요기능에서 글이 발행이 됐을 때 unshift로 배열 앞에 0을 추가 해준다.

- input에 친 내용이 아무것도("")없을 때 input blank에 포커스를 준다.

titleInputRef.current.focus();

useRef로 태그의 특정 위치를 지정할 수 있다.

input에 ref={titleInputRef}을 함으로써 input 태그가 선택된 것.

 

- else 아니면 input blank를 비워라.

- input 에 작성된 내용들은 글 리스트 맨 앞에 위치한다(unshift)

const addContent = () => {
    let goodCopy = [...good];
    goodCopy.unshift(0);
    setGood(goodCopy);
    if (input == "") {
      return titleInputRef.current.focus();
    } else {
      setInput("");
    }
    let copy = [...content];
    copy.unshift(input);
    setContent(copy);
    // return input == "" ? titleInputRef.current.focus() : setInput("");
  };

(3) input에는 함수 onChange를 사용

- e.target.value 현재 선택된 input의 value값을 state변경함수에 저장

      <input
        className="blank"
        value={input}
        onChange={(e) => {
          setInput(e.target.value);
        }}
        ref={titleInputRef}
      ></input>
      <button
        onClick={() => {
          addContent();
        }}
      >
        글발행
      </button>

03. 글 삭제 기능

글 삭제 버튼을 누르면 그 해당 게시글이 삭제된다.

 

(1) splice(i,a) : i 번째 요소부터 a개까지 삭제

 const deleteContent = (i) => {
    let copy = [...content];
    copy.splice(i, 1);
    setContent(copy);
  };

    <button
              onClick={() => {
                deleteContent(i);
              }}
            >
              글 삭제
            </button>

04. 글 수정 기능

글 수정 버튼을 누르면 게시글 제목이 '수정한 콘텐츠'라고 문구가 변경된다

const changeContent = (i) => {
    let copy = [...content];
    copy[i] = "수정한 콘텐츠";
    setContent(copy);
  };

     <button
              onClick={() => {
                changeContent(i);
              }}
            >
              글수정
            </button>