작성해야할 개발 기술
리액트 styled-component
onKeyUp, onKeyDown, onKeyUp
spread syntax 구문
developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
전개 구문 - JavaScript | MDN
전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수 (함수로 호출할 경우) 또는 요소 (배열 리터럴의 경우)로 확장하여, 0개 이상의 키-값의 쌍으로 객체로 확장시
developer.mozilla.org
useQuery 에서 skip 하는 기술
const {data, loading} = useQuery(SEARCH, {
skip: term === undefined,
variables: {
term
}
});
SearchContainer
import React from "react";
import {withRouter} from "react-router-dom";
import SearchPresenter from "./SearchPresenter";
import {useQuery} from "react-apollo-hooks";
import {SEARCH} from "./SearchQueries";
// withRouter는 무슨 함수이지?
export default withRouter(({location: {search}}) => {
const term = search.split("=")[1];
const {data, loading} = useQuery(SEARCH, {
skip: term === undefined,
variables: {
term
}
});
console.log(data);
return <SearchPresenter searchTerm={term} loading={loading} data={data} />;
});
여기서 withRouter가 무엇인가??
javascript의 ()와 {}의 차이
우선적으로 작성할 내용
1) withRouter 사용법
2) Apollo Query : useQuery --> useQuery 리턴방식
3) useQuery 시에 Skip 사용하는 방법
4) Hook 사용법 : useState, useMutation, useQuery