220418

こうぞうぶんかいわりあて

オブジェクトに構造分解を割り当てる

const child = {
  name = "Alex",
  age = 13
  school = "abc school"
  
}

const name = child.name
const age = child.age
const school = child.school

// 로 쓰는 대신 아래처럼 구조분해할당을 이용해 한 줄로 정리할 수 있다.

const { name, age, school } = chilid
// child 안에 있는 변수를 빼서 새로운 변수를 만들겠다는 선언

const { data, loading } = useQuert(FETCH_BOARDS)

// 위의 코드 아래처럼 다시 적어줄 수도 있다.
const aaa = useQuery(FETCH_BOARD
aaa.data
aaa.loading

関数の実行後に受信した戻り値はオブジェクトです
オブジェクトの構造分解配分では,順序は重要ではなく,キー値は重要である.オブジェクトに宣言をインポートするキーなので、エラーは発生しません.

アレイからの構造分解の割り当て

const classmate = ["Alex", "Peter", "Amy]

const child1 = classmate[0]
const child2 = classmate[1]
const child3 = classmate[2]

const [child1, child2, child3] = classmate

useState実行後の戻り値は配列

comst [state, setState] = useState("")
const bbb = useState
bbb[0] = state
bbb[1] = setState
// bbb[1](20) 을 넣으면 setState(20)이 된다.

const [ , child2, child3 ] = classmates

// 쓰지 않는 변수가 있다면 , 로 자리를 남겨줘야 한다.

並び順が重要です.未使用の変数では、次の変数に挿入して渡すことを忘れないでください.

なぜ書き込み構造分解割当てですか?

// 1. 구조분해 할당으로 함수 파라미터 받기
function onClickAAA({ name, age, school }){ // 2. 구조분해 할당해서 변수로 받는다
  console.log(name) // "철수"
}

const child = {
  name: "철수",
  age: 13,
  school: "다람쥐초등학교"
}
onClickAAA(child) // 1. 객체 child 를 인자로 넘기면

// 같은 이름을 가진 데이터를 뽑아오기 때문에 순서가 다르거나 인자로 넘어온 데이터 개수가 달라도 옛날 방식과 같은 오류가 나지 않는다.

// 2. 안좋은 옛날 방식
function onClickAAA(name, age, school){ // 2. age에 다람쥐초등학교가 들어가게 된다
  console.log(name)
}

const name: "철수"
const age: 13
const school: "다람쥐초등학교"
onClickAAA(name, school) // 1. 인자로 name과 school을 넘겨주면

Rest parameter

const child = {
  name: "철수",
  age: 8,
  school: "다람쥐 초등학교",
  money: 2000,
  hobby: "수영"
}

moneyと嗜好を削除したい場合は、delete child.money delete child.アマチュア趣味で消すことができます.しかし、他の場所で使用される可能性があるため、jsで原本に触れる行為はよくない.この場合、構造分解割当てとrestパラメータを使用して値をクリアできます.

const { money, hobby, ...rest } = child

restは{ name: "철수", age: 8, school: "다람쥐 초등학교" }を含む.

上記のようにrestパラメータを使用すると、ソースを破損することなくデータを削除できます...restはあなたが望む名前に変えることができます.
学校は書き間違えました.

Custom Hooks

useState,useEffect,useQuery,useRouter,useMutationなどのuse付き関数をreact hookと呼ぶ.hookを使用する関数がある場合は、通常の関数とは少し異なるネーミング方法を使用します.
関数名の前にuseを付けて生成した関数をcustom hooksと呼ぶ.useを追加しなくても実行できますが、これはDocsが推奨する事項なので、useを追加してください!

export function useAuth() {
  const router = useRouter();
 
  useEffect(() => {
    if (!localStorage.getItem("accessToken")) {
      alert("로그인 후 이용 가능합니다");
      router.push("/login");
    }
  }, []);
}

function CustomHooksUseAuthPage() {
  // useAuth 를 import 해와서 사용
  useAuth();

  return <div>철수의 프로필 페이지 입니다!!</div>;
}

export default CustomHooksUseAuthPage;

権限分岐論理の使用は、HOCを使用する場合よりも簡単です.
多くの場所でよく使われる関数がある場合は、hooksフォルダを作成し、削除して管理します.コンポーネントが簡潔になります.

Cache Modify

コンポーネントからuseQueryを介して入力された{data}は、apollo-cache-stateと呼ばれるglobal stateに格納される.cache.modifyとは、global stateに格納されているデータを直接変更することを意味する.
global stateは、fetchBoard:{}のような객체 형태로 데이터가 저장を含み、各オブジェクトをフィールドと呼ぶ.

const onClickDelete = (boardId: string) => async () => {
    await deleteBoard({
      variables: { boardId },
      
      // variables 요청 후 cache 를 업데이트
      // cache, useQuery의 결과
      update(cache, { data }) {
        
        			   // data 안에 deleteBoard
        const deletedId = data.deleteBoard; // deleteBoard 를 실행하고 남은 return 값
        cache.modify({
          fields: {
            // 현재 페치보드 상태(prev)에서 삭제된 보드 지우기
            fetchBoards: (prev, {readField}) => {
              
              // _id가 배열로 저장된 prev에서 deletedId 와 같은 _id 제거
              // filter로 삭제된 _id와 다른 데이터만 남겨서 return 해주기
              // el._id 를 사용할 수 없기 때문에 readField로 el 에서 _id를 꺼내온다.
              const filteredPrev = prev.filter((el) => readField("_id", el) !== deletedId);
              return filteredPrev; 
            },
          }, // global state 를 수정했기 때문에 사용하는 모든 컴포넌트에서 업데이트 된다
        });
      }, 
    });
  };

cache.modifyを使用した削除は、主に無限スクロールページに使用されます.