2020년 1월 13일 수업 - GraphQL 2번째

import React, 
{ 
  useState, 
  useEffect,
  useRef 
} from 'react';
// ver. 1
function Game() {
  console.log('1. load');
  const [pick, setPick] = useState('');
  const [myPick, setMyPick] = useState('');
  const [winner, setWinner] = useState('');
  const selRef = useRef(null); // ver. 2
  const runGame = val => {
    const items = ['가위', '바위', '보'];
    const ranIdx = Math.floor(Math.random() * items.length);
    setPick(items[ranIdx]);
    setMyPick(val);
  };
  useEffect(() => {
    console.log('3. useEffect1')
    let _winner;
    if (pick === '가위') {
      if (myPick === '가위') _winner = 'none';
      if (myPick === '바위') _winner = 'you';
      if (myPick === '보') _winner = 'com';
    } else if (pick === '바위') {
      if (myPick === '가위') _winner = 'com';
      if (myPick === '바위') _winner = 'none';
      if (myPick === '보') _winner = 'you';
    } else {
      if (myPick === '가위') _winner = 'you';
      if (myPick === '바위') _winner = 'com';
      if (myPick === '보') _winner = 'none';
    }
    setWinner(_winner);  // 해당 사이클에서 _winner가 바뀌지 않는다. 다음 사이클 시작 전에 바뀜
    setWinner(_winner);
    setWinner(_winner);
  }, [pick, myPick]);
  useEffect(() => {
    console.log('4. useEffect2')
    // console.log('winner is ' + winner);
  }, [winner]);
  // ver.1
  // return (
  //   <>
  //     <button onClick={() => runGame('가위')}>가위</button>
  //     <button onClick={() => runGame('바위')}>바위</button>
  //     <button onClick={() => runGame('보')}>보</button>
  //   </>
  // );
  const handleSelChange = () => {
    const val = selRef.current.value;
    // runGame(val);
    console.log(val);
  }
  // 1 2 3 4 1 2
  // ver. 2
  return (
    <>
      {winner}
      {(() => console.log('2. render'))()}
      <select ref={selRef} onChange={handleSelChange}>
        <option value="가위">가위</option>
        <option value="바위">바위</option>
        <option value="보">보</option>
      </select>
    </>
  );
}
export default Game;

react의 중요한 특징 중 하나

useEffect안의 setWinner가 순차적으로 일단 다 실행이 됨. 쭈욱 위에서 아래로

근데 state가 바뀌는것은 해당 사이클에 바뀌는것이아니라 다음 사이클 즉 load가 다시 시작될때 바뀌는 것이다.

 

 

 

 

GraphQL

 

mutation이란 타이틀(키워드)은 생략이 불가능하다. (query는 생략가능)

 

GraphQL의 list는 javascript의 배열과 동일하다. [](대괄호) 안에 써있는 부분

 

myField: [String!]

list 자체가 null인것은 상관없지만, list안에 포함되어있는 데이터는 null이 포함되면 안된다.

 

 

Interface에서 상속받은 애의 정의된 필드명은 반드시 일치시켜야하지만, 

필드값은 반드시 일치시킬필요없다. 

 

 

ApolloQL 

GraphQL을 좀 더 편리하고 생산성있게 하기위해 하는 라이브러리 (Relay라는 것도 있음)

 

(Relay : facebook에서 만든 공식적인 라이브러리이지만, 많이 쓰이지 않는다. 스키마와 쿼리에 대한 제약이 많아서.)

 

graphQL

 

데이터베이스를 캐시화했다. = 사용자가 서버단에서 캐시화를 해주게되면 (원래는 데이터베이스를 조회하여 가져와야하는데 ) 불필요하게 데이터를 조회하는 과정을 생략하여 한 번 가져왔던 데이터를 저장했다가 이것을 불러오게된다.

 

 

VisualStudio setting

npm i apollo-client apollo-cache-inmemory apollo-link-http graphql graphql-tag react-apollo

이렇게 설치한다. 

 

Apollo Boost :  apollo client, cache-inmemory 등을 포함하고 있음.

보통 패키지단위로 설치를 하긴하지만, 많은 패키지를 설치를 하면 성능에 좋지 않으므로

필요한것 즉 apollo client와 inmemory정도 설치한다.

 

 

** 항상 동일한 쿼리를 요청 => 캐시

graphQL : 기존의 REST API 를 해결하기 위해 사용 , 페이스북에서 만든 쿼리 언어

gql은 웹 클라이언트가 데이터를 서버로 부터 효율적으로 가져오는 것이 목적

 

Rest API와 비교하였을때

REST API는 URL, METHOD등을 조합하기 때문에 다양한 Endpoint가 존재 합니다. 반면, gql은 단 하나의 Endpoint가 존재 합니다. 또한, gql API에서는 불러오는 데이터의 종류를 쿼리 조합을 통해서 결정 합니다. 예를 들면, REST API에서는 각 Endpoint마다 데이터베이스 SQL 쿼리가 달라지는 반면, gql API는 gql 스키마의 타입마다 데이터베이스 SQL 쿼리가 달라집니다.

(https://tech.kakao.com/2019/08/01/graphql-basic/ 에서 가져왔습니다.)