리액트의 심장과 통신
index.js
App.js
index.html
index.js
1.index.js
src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다.
여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.
2.App.js
src 폴더에 있다. 이것은 컴포넌트를 정의하는 프로그램이다.
실제로 화면에 표시되는 내용 등은 여기에서 정의된다.
3.index.html
public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다.
이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀시 오류발생)
통신?
리액트는 UI구현에 있어서 매우 파워풀하다고 생각한다. 하지만 통신이 필요로 할때, 예를들면 AJAX같은 멋진 친구들이 존재하지 않기에 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용하는것이 정신건강에 이롭다.
그중에선 axios 라이브러리와 Apollo 라이브러리가 존재하는데 이를 간략하게 배웠다.
AJAX (Asynchronous Javascript And XML)
Axios
Axios는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리.
그리고 rest api인데
위 링크에서 나중에 rest api를 좀더 공부해야겠다.
모조리 들고와
모조리 들고와버려서 원하는 데이터만 찢어서 쓰면 되긴 하는데... 오버페칭, 언더페칭의 문제가 뭔지 감이 잡혔다. 저 데이터만 들고오는게 아니라 다른거 까지 다 들고오기 때문에 조금 유의깊게 봐야할것같다.
Apollo
Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리다.
Apollo Client 생성
먼저, Apollo Client를 생성해야 하는데, 이 때 호출할 GraphQL API의 접속 정보를 설정해줘야한다. @apollo/client를 임포트한 뒤 ApolloClient 생성자 함수의 인자로 uri 속성이 포함된 설정 객체를 넘기면 끝. 연습용 데이터 서버를 가져온다.
ApolloClient, Provider, 캐시기능을 사용하기위해 Inmemorycache도 들고와준다.
ApolloProvider 컴포넌트로 앱의 최상위 컴포넌트를 감싸준 후. 이 때, client prop에 위에서 생성한 ApolloClient 객체를 넘겨줘야 한다. 이렇게 설정을 해주면, 앱 내의 모든 컴포넌트에서 GraphQL API 연동이 가능.
Graphql API 호출
gql이라는 template literal tag를 사용해서 일반 자바스크립트 문자열을 GraphQL 구문으로 바꾼 후 Import한 Query 컴포넌트 또는 Mutatition의 prop으로 넘겨준다.
여기서는 Mutation을 가져왓기에 Mutaition의 Prop으로 넘겼다.
useState + Spread
inputs, setInputs를 useState를 사용하여 객채로 키, 벨류 값으로 저장해 놓는다.
onChange용 함수다. setInputs에서 Spread로 기존 배열들을 미리 저장해 두고, 만일 타겟의 아이디 또는 name이 존재하지 않는 다면 기존 inputs에 해당 값을 key로 두고 해당 값을 넣어준다.
이런식으로 만들어 나가면 각각의 onchange마다 따로 usestate를 만들 필요 없이 하나의 이벤트 핸들러로 조작할수 있기에 코드의 가독성이나 유지보수 측면에서 유용할것이다
이렇게 만들때, 만일 mutation할 data의 키값과 해당 inputs의 키값을 같게 설정할 경우 매우 간편하게 mutation 시킬 수 있다.
쓰기 전
쓴 후
한층 더 간결해졌다.
다만 이렇게 묶을때는 이게 편하다고 모조리 묶으려고 하지말고 사용하는 용도에 따라서 생각하면서 쓰는것이 현명하다.
