TIL[15일차].무한스크롤, 얕은복사

남예지·2022년 11월 18일

TIL

목록 보기

11/47

yarn add storybook

컴포넌트들을 관리할 수 있음
마우스 올리면 색 변하는 애니도 볼 수 있음
swagger만들어서 접속하듯이 스토리북은 주소가 나오는데 디자이너와 공유해서 사이트 사용되는 컴포넌트들을 관리

깊은 복사/ 얕은 복사

복사

let aaa ="철수"
let bbb = aaa
bbb // "철수"

복사본을 수정했다고 해서 원본이 수정되면 복사라고 볼 수 없다.
bbb를 "영희"로 수정해도 aaa는 그대로다.

하지만 객체, 배열은 위와 같이 복사가 안된다.

변수저장원리

객체와 배열은 칸 하나에 다 못들어가기 때문에 다른데 저장하고, 저장한 주소값을 저장한다.
그래서 배열이나 객체를 그냥 복사를 하면 주소를 복사해서 같은 주소지를 가지기 때문에 복사본을 수정하면 원본도 같이 변경된다.

중괄호가 생기는 순간 새로운 주소가 생긴다.
그래서 복사하려면 새로운 주소를 생성하기 위해 중괄호를 하고 값을 넣어준다.

그런데 이러면 같은 문장이 너무 많이 나오고, 객체 키가 많으면 귀찮아지기 때문에 스프래드 연산자를 사용한다.

const profile2 = {...profile1} : 얕은 복사 (객체)
const bbb = [...aaa] : 얕은 복사 (배열)

이것을 활용하여 댓글 수정 기능을 만들 수 있다.

수정하기를 누르면 수정 창으로 변하고, 이를 수정완료하기하면 완료가 됨

Object.freeze(propile) : 객체 안에 요소도 바뀌지 않게 하려면 얼리는 함수를 사용

댓글 수정방법

많이 어려웠지만

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

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

무한스크롤

이걸 해주는 라이브러리 중 유명한게 2가지 있다.

search packages
//웹에서는 심플하다.
react-infinite-scroll-component

//안에 있는 옵션은 둘 다 동일하거나 비슷하다.

2를 사용해보자.
터미널에 설치해준다.
https://www.npmjs.com/package/@storybook/react
여기를 들어가 Getting Started를 보고 설치하면 된다.

yarn add react-infinite-scroller

이때 타입스트립트를 사용하고 있으니 타입스크립트 전용으로 하나 더 설치해준다.

yarn add --dev @types/react-infinite-scroller

import 해준다.

import InfiniteScroll from 'react-infinite-scroller';

스크롤이 되면 fetchmore를 해준다.

export default function StaticRoutedPage() {
  const { data, fetchMore } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);

  const onLoadMore = () => {
    fetchMore({
      variables: { page: 2 },
      updateQuery: () => {},
    });
  };
  
return (
    <InfiniteScroll pageStart={0} loadMore={onLoadMor} hasMore={true}>
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span style={{ margin: "10px" }}>{el.title}</span>
          <span style={{ margin: "10px" }}>{el.contents}</span>
        </div>
      ))}
    </InfiniteScroll>
  );
}