React+Apollo+GraphQL 시작하기

React+Apollo+GraphQL 시작하기 

이번에는 프론트 단을 만들어 보겠습니다. 이전에 공부했던 GraphQL가 연동하기 위해선 Apollo라는 것을 사용해야하는데 이를 React와 함께 사용해보겠습니다. 

https://github.com/apollographql/react-apollo 

이주소로 들어가보면 React와 Apollo를 함께 사용할 수 있게 필요한 것 들이 정리되어 있습니다.

이와 같은 명령어를 통해서 설치해줍니다. 

npm install apollo-boost react-apollo graphql-tag graphql --save

그리고 평소와 같이 create react-app을 만들어줍니다. 

1. 우선 클라이언트를 만들어줍니다. 

여기에 uri는 Graphql의 서버의 주소를 사용합니다. 

ApolloProvider에 client를 등록하여 사용하면됩니다. ApolloProvider는 react-apollo에 있습니다. 

Route를 사용하기 위해선 HashRouter와 BrowserRouter가 있는데 여기선 HashRouter를 사용하겠습니다. hashRouter는 #을 이용해서 url을 찾아가는 방법입니다. 
https://stackoverflow.com/questions/51974369/hashrouter-vs-browserrouter

Route에 component와 exact라는 옵션이 있는데 component는 이 url로 접속되었을 때 이 컴포넌트를 반환하겠다는 뜻이고 exact 옵션을 해주지 않으면 /포함되게 접속하는 모든 url은 Home을 반환하게 됩니다. 그런 일을 예방하기 위해서 exact를 true라고 지정해놓습니다. 

Route들을 덮어 씌우고 /과 /test에 접속하면 아래와 같은 결과를 볼 수 있습니다. 

Home.js

test.js