[TIL 0331] 댓글 수정하기(정리중)

zitto·2023년 4월 2일

TIL

목록 보기

22/77

댓글의 수는 예상할 수 없음.
따라서 그 개수 만큼의 길이를 가진 배열로 state를 관리하는 것은 비효율적이다.

댓글 컴포넌트를 따로 분리한 뒤
각각의 컴포넌트에서 isEdit state를 관리하는 방식을 사용!

각 컴포넌트가 가지고 있는 isEdit은 이름만 같고 서로 독립적이기 때문에 별도로 관리할 수 있어 유지보수 하기 굉장히 좋아진다.

import { useQuery, gql } from "@apollo/client";
import type {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../../src/commons/types/generated/types";
import CommentItem from "../../../src/components/units/16-comment-item";
const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;
export default function StaticRoutingPage(): JSX.Element {
  const { data } = useQuery<Pick<IQuery, "fetchBoards">, IQueryFetchBoardsArgs>(
    FETCH_BOARDS
  );
  return (
    <div>
      {data?.fetchBoards.map((el) => (
        <CommentItem key={el._id} el={el} />
      ))}
    </div>
  );
}

item 컴포넌트

import { useState } from "react";
export default function CommentItem(props: any): JSX.Element {
  const [isEdit, setIsEdit] = useState(false);
  const onClickEdit = (): void => {
    setIsEdit(true);
  };
  return (
    <div>
      {!isEdit ? (
        <div>
          <span style={{ margin: "10px" }}>{props.el.title}</span>
          <span style={{ margin: "10px" }}>{props.el.writer}</span>
          <button onClick={onClickEdit}>수정하기</button>
        </div>
      ) : (
        <input type="text" />
      )}
    </div>
  );
}

myIndex는 이라고 해오면 원본 그대로의 주소를 가지고 왔기 때문에 주소가 바뀌지 않고 동일하므로 안바뀌었다고 인지한다.
따라서 스프레드연산자로 바꿔줘야
기존과는 다른 새로운 주소로 되어서 화면에 잘 그려낼 수 있는 것!
보통은 시작할 때 연산자를 한다.
시작시점에서 복사해서 가지고 온다.