React JS/Lecture (14) 썸네일형 리스트형 React - Hook 리액트 훅 사용법 정리 (2) useQuery #1. useQuery 사용법 이는 아폴로 클라이언트의 기존 사용법을 대처한다. #0 클라이언트 정의 import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "https://movieql.now.sh/" }); export default client; #1.1 루트 경로에 프로바이더 넣어주기. 기존의 사용법과 같이 쓰려면 훅프로바이더를 추가하는 방식으로 넣기. import React from "react"; import ReactDOM from "react-dom"; import App from "./App"; import { ApolloProvider } from "react-apollo"; import { Apol.. React - Hook 리액트 훅 사용법 정리 (1) useState,useRef,createRef #1. useState 사용하기 useState(기본값) 은 get변수/set변수를 리스트로 반환한다. get변수는 count 라는 변수이름으로 받고, set함수인자는 setCount라고 받아서 사용한다. 클릭시 바로 setCount에 Count+1를 설정할수 있다. 또는 onChange 이벤트에 다른 커스텀 함수를 연결해서, taget:{value} 를 가져와서 email를 set 할수도 있다. import React, { useState } from "react"; import "./styles.css"; const Section = ({ title, children }) => ( {title} {children} ); export default function App() { //-----------.. React 리액트 - Redux 대체해서 ApolloClient 써보기 React 리액트 - Redux 대체해서 ApolloClient 써보기 1. 클라이언트 state에 들어갈 디폴트(스테이트)와 리소버 정의 // defaults는 Graphql문법이 아닌, state 개념이다. export const defaults = { isLoggedIn: Boolean(localStorage.getItem("token")) || false }; //resolvers의 세번쨰 인자가 의문이네... 두번째 인자도, 기본 리소버랑 다른 매커니즘인듯 export const resolvers = { Mutation: { logUserIn: (_, { token }, { cache }) => { localStorage.setItem("token", token); cache.writeData(.. React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기. React Grapqhl 아폴로를 이용한 클라이언트 환경 만들기. 1. 환경설치 yarn add react-router-dom graphql graphql-tag react-apollo@2.5 apollo-boost 2. 아폴로 클라이언트 프로바이더 만들기 ------------------------------------------------------------ 아폴로 클라이언트 설정 : 어디서 데이터를 얻어올건가 import ApolloClient from "apollo-boost"; const client = new ApolloClient({ uri: "http://localhost:4000/" }); export default client; -------------------------------.. React J N 스타일 컴포넌트 5가지 꿀팁 스타일 컴포넌트 강의 https://github.com/DosImpact/styledCompoenets DosImpact/styledCompoenets React J N (props.danger ? `red;` : `green;`)}; `; const Container = styled.div` justify-content: center; & ${Button}:nth-child(1) { background-color: coral; } `; 2. Theme Provider const theme = { mainColor: "#3498db", dangerColor: "#e74c3c", successColor: "#2ecc71" }; export default theme; ----------------------.. React 폰트 어썸 아이콘 사용하기 1. 설치 yarn add @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome 2. 임포트 import{FontAwesomeIcon}from"@fortawesome/react-fontawesome"; import{faBars}from"@fortawesome/free-solid-svg-icons"; 3. 컴포넌트 사용 결과: DOS IMPACT - WEB Developer KIM DO YOUNG WEB : REACT JS | REACT NATIVE | GraphQL PRISMA 이전 1 2 다음
