FE 22일차

jae·2022년 6월 7일

포트폴리오 리뷰

검색 시 refetch를 할때
페이지네이션이 정상 작동을 하기 위해서는
게시물 뿐 아니라 카운트도 리패치는 필수

이렇게 맵으로 그려진 리스트에 uuid를 이용하여 추가로 리스트가 들어가면
이벤트 버블링이 이뤄지기 때문에 제목을 클릭해도 열리지 않을 수 있다.
그럴땐 target이 아닌 currentTarget으로 변경해야한다.

Over-Fetching Under-Fetching

원래의 형태는 present를 임폴트 받아와서 사용하는 것인데
props를 사용 하고 있었다,
props는 함수의 매개 변수인 것이고 다른 이름을 사용하는 것도 가능하다.

map이 3번을 실행 시켜준다
el, index는 매개변수 항목은 인자가 된다.

원한다면 $를 이용해 전달될 통로의 이름을 바꿀 수 있지만
통일시켜서 바꿔야한다

이렇게 두가지 이상의 요청을 하나의 뮤테이션에 묶어서 요청을 보낼수 있다
위처럼 만약 내가 3개의 응답을 원한다면 rest-api는 세번의 요청이 필요하기에
언더페칭이라는 문제가 발생한다.
그 문제를 해결한게 graphql-api이다

이렇게 매개변수라는 것은 약속된 명령어가 아니라
내가 코드를 다루기 편하게 이름 변경도 가능하고 그저 파라미터를 이용하는 통로일 뿐이다.

export default function ChildPage(aaa) {
  return <div>나의 카운트는 : {aaa.count}</div>;
}

프롭스를 받아오는 자식 컴포넌트가 있다면

import ChildPage from "../21-02-child";

export default function ParentPage(aaa) {
  //   return <ChildPage count={100} />;
  //   return <>{ChildPage({ count: 100 })}</>;
  const qqq = { count: 100 };
  return <>{ChildPage(qqq)}</>;
}

여기서 어떤 리턴을 넣어도 카운트는 동일하게 나온다

["철수", "영희", "훈이"].map((el, index) => {
console.log("el: ", el);
  console.log("index: ", index);
});

  //매개 변수변경한 방법
   ["철수", "영희", "훈이"].map((asdf, qwer) => {
    console.log("el: ", asdf);
   console.log("index: ", qwer);
  });

 // 함수 선언식 사용
  ["철수", "영희", "훈이"].map(function(asdf, qwer){
  console.log("el: ", asdf);
    console.log("index: ", qwer);
   });

 // el과 Index 바꾸기
 ["철수", "영희", "훈이"].forEach((index, el) => {
    console.log("el: ", el);
     console.log("index: ", index);
  });

// 화살표 함수
    setCount((prev) => prev + 1);
    // 함수 선언식
    setCount(function (prev) {
      // 로직 추가 가능
      // If() 등
      // for() 등
      return prev + 1;
    });
    // 매개변수 바꿔보기
    setCount((asd) => asd + 1);

Recoil

이렇게 페이지를 만들 때 외부에 만들어둔 컴포넌트들을 가져와서
페이지를 구성할 수 있다.
글로벌 스테이트는 여기저기서 다 쓰이는 동일한 스테이들이 있다면
그 스테이트들을 하나에만 저장하여 가져다 쓰는 것이다.

이런 전역상태관리(global state) 툴은 여러가지가 있었으나
주로 쓰던 Redux에서 MobX, SWR 거쳐서 이제는 React-Query를 주로 사용한다

React-Query를 쓰면서 감싸진 부분의 업데이트가 되지않은 state에도 리렌더가 발생하여
불 필요한 렌더링의 문제점을 보완하여 나온것이 Recoil 입니다.

Recoil은 단점을 보완해서 나온만큼 업데이트된 state 부분만 리렌더를 해준다

React-Query + recoil
Apollo-Client + recoil

useQuery, useMutation 를 사용한다.

data 변경 시 리렌더링
동일한 쿼리를 다른 컴포넌트에서 사용 할 시, 백엔드에 재요청이 가지않음.

이렇게 된 것은 예전에 쓰던 방식인데
이렇게 써야했던 것들이 이제 자동화 되었다.

사용 시 key가 api이름이 된다.

fetchPolicy

apollo-client로 global state를 만들게되면 Apollo-Cache 라는곳에 임시 저장되게 된다.
그래서 useQuery나 Mutation을 통하여 이전 요청이 있었던 상태에서 추가적 요청을 보내려고 한다면
1차적으로 글로벌 스테이트에 임시 저장된 자료가 있는지 확인을 하고 API를 요청한다.