Day 15

코드의 재사용성

페이지네이션같은 경우는 한 페이지에 넣기보다는(내가했음) src/commons/paginations/01/Paginations01.container, presenter....등등 이런식으로 나중에도 다른 곳에 활용할 수 있게 공용 공간으로 컴포넌트를 만들어두는 것이 좋다.

왜 코드를 재사용 해야 하는가?
항상 '한 번 만들고 여러 번 사용한다' 는 사고방식을 가져야 한다

1. 코드가 단 하나의 프로그램에서만 이용되지 않음
2. 재사용성이 높으면 시간과 돈을 절약할 수 있다.
3. 중복 코드는 더 많은 공간을 차지하고 유지보수비용이 높아진다.
4. 재사용성이 높으면 내 자신의 일에도 도움된다.

그래서 재사용성이 높은 코드는 어떻게 만드나요??

1. 일반화되고 보편화된 코드
2. 사용하기 쉬운 코드

만약 저렇게 잘 만들어 둔다면 비슷한 기능을 나중에 쓸 때 다시 불러와서 간단한 수정만 하면 가능할 것이다.

State 끌어올리기

한 부모 컴포넌트 안의 두 자식 컴포넌트들이 있는데,
자식1의 카운트를 증가시키면 자식2의 카운트를 증가시키고 싶다.
그럼 어떻게 ?
자식 둘에 있는 state 부모로 끌어온 뒤 자식들에게는 props로 준다

이게 같은게 맞나?? setstate도 사라졌는데?

그럼 setState를 주면됨

값 복사 실습

이제 자식에 있는걸 가져오자

그럼 부모 버튼만 눌러도 동기화가 된다.

그럼 자식 버튼을 눌러서 부모께 실행되는걸 원한다면??

setstate가 있는 부분을 가져온다.

객체/배열 복사

여기서 child2를 맹구라고 해도
myfriend2는 아직 영희다

복사를하고 나서 원본을 바꿔도 복사본이 바뀌지는 않는 셈이다.

근데 profile을 철수, 8, 다람쥐 초등학교라고 해놓고 friendprofile로 복사한 후, profile의 name을 영희로 바꿨는데

friendprofile도 영희로 바뀌었다.

String, Number, Boolean 은 값이 저장되지만

객체와 배열은 번지에 저장된다

번지?? 주소같은 느낌이다.

그래서 profile의 name을 바꿨어도 주소값은 동일하기 때문에 똑같이 바뀐것

그래서 어떻게 복사해야되죠??

얕은복사

사실 엄밀히 말하면 profile을 새로운 friendprofile에 담은 것인데 일단 profile의 내용을 바꿔도 그대로 남아있다.
이걸 근데 계속 쳐야되나?? 그대로 치는 방법이 있다고 한다.

...을 스프레드 연산자(객체 안에 있는걸 흩뿌린다-spread)라고 한다
이렇게 하면 한번에 다 가져올 수 있다

++한번더
객체 안의 객체는 어떻게 될까?
여기서 myfriendprofile을 ...profile로 가져오고나서 원본을 바꾼다고 해서 바뀌지 않는다.
그래서 얕은복사, Shallow Copy라고 부른다.

깊은복사
그렇다면 다 가져오는 방법은? 그냥 전체를 새로 다시 가져오는 개념이다.
전체를 문자열로 바꾼다음 가져온다.

다시 문자열을 객체로 바꾸기

여기서 const profile2 = JSON.parse(JSON.stringify(profile))하면 깊은복사를 한 셈이다. (전체를 새로 다시 가져왔다는 의미)

이건 속도가 좀 느린데요, 그래서 관련 라이브러리가 있음 이름은 lodash

3300만 다운로드!! 다음에 활용해보자

?? 객체의 특성 ?!
객체 안에 여러 같은 값이 있을 경우, 아래 입력된 것을 가져옴
이 특성과 스프레드 ...이용해 리팩터링을 할 수 있다.

무한 스크롤

https://www.npmjs.com/package/react-infinite-scroller
인피니트 스크롤러
import 뒤 item 안에 넣는다

yarn add -D @types/react-infinite-scroller
타입도 추가해야함
https://www.npmjs.com/package/react-infinite-scroll-component
인피니트 스크롤러 컴포넌트

import { gql, useQuery } from "@apollo/client";
import {
  IQuery,
  IQueryFetchBoardsArgs,
} from "../../src/commons/types/generated/types";
import InfiniteScroll from "react-infinite-scroller"
const FETCH_BOARDS = gql`
  query fetchBoards($page: Int) {
    fetchBoards(page: $page) {
      _id
      writer
      title
      contents
    }
  }
`;
export default function InfiniteScrollerPage() {
  const { data, fetchMore } = useQuery<
    Pick<IQuery, "fetchBoards">,
    IQueryFetchBoardsArgs
  >(FETCH_BOARDS);
  function onLoadMore() {
    if (!data) return;
    fetchMore({
      variables: { page: Math.ceil(data?.fetchBoards.length / 10) + 1 },
      updateQuery: (prev, { fetchMoreResult }) => {
        // console.log(fetchMoreResult?.fetchBoards);
        // console.log(prev.fetchBoards);
        if (!fetchMoreResult?.fetchBoards)
          return {
            fetchBoards: [...prev.fetchBoards],
          };
        return {
          fetchBoards: [...prev.fetchBoards, ...fetchMoreResult?.fetchBoards],
        };
      },
    });
  }
  return (
    <InfiniteScroll pageStart={0} loadMore={onLoadMore} hasMore={true}>
      {data?.fetchBoards.map((el) => (
        <div key={el._id}>
          <span>{el.writer}</span>
          <span>{el.title}</span>
          <span>{el.contents}</span>
        </div>
      ))}
    </InfiniteScroll>
  );
}