Den`s blog

React 에서 GraphQL을 사용할 때 보통 useQuery를 사용한다. useQuery 란, API 로 치면 API Call 을 하는 것이라고 보면 된다. const ITEMS_QUERY = gql` query allItemsQuery($input: AllItemInput!) { allItems { ok error items { name registeredAt } } } `; const { data, loading } = useQuery(ITEMS_QUERY, { variables: { input: { page: 1, } } }); 위 코드는 GraphQL 에서 allItemsQuery 의 Query가 있고 그 input 으로 AllItemInput 이 있을 경우다. (AllItemInput 은 p..

이번 포스팅에서는 React 에서 화면전환에 사용되는 react-router-dom 에서 useHistory 와 useLocation 에 대해 알아보려고 한다. 일단 react-router-dom 은 별도의 설치가 필요하므로 진행해준다. npm install react-router-dom Router 구성은 생략하도록 하겠다. 1. useHistory Hook const history = useHistory(); const onSearchSubmit = () => { const { searchTerm } = getValues(); history.push({ pathname: "/search", search: `?term=${searchTerm}`, state: { searchTerm, } }); } us..

이전 포스팅에서 ReactJS 의 Class Component 를 살펴보면서 가장 기초적인 부분들을 확인해 보았다. 이번에는 Updating과 State 에 대해 알아보도록 하자. ReactJS 에서는 State 라는 것을 가지고 있는데, 이 아이는 유동적인 데이터를 사용할 때 써먹는다. 기본적으로 this.state = {}; 위와 같이 사용을 하는데, 이는 private 처럼 사용해야한다, 직접 조작해서는 안되는 뜻! 변경이 필요할 때는 마치 다른 클래스의 setter 를 사용하듯 setState 메소드를 활용해주어야 한다. 그 이유는 Updating과 관련이 있는데, state 가 변경될때마다 ReactJS는 렌더링을 다시 하는데, setState 메소드를 사용하지 않는다면 이 부분을 감지 못하므로..

깃헙 블로그를 만들어보면서 제대로 공부를 시작하기로 했고, 그 일련의 작업들로 기초부터 다지고 있다. 그래서, ReactJS 를 공부를 시작했는데 그 시작에 앞서 ReactJS 에서 가장 많이 사용되는 거로 알고 있는 Component의 생명주기에 대해서 알아보자. 핵심은 render() 함수 인데, 이 함수가 가상돔에 HTML 코드를 써준다 라고 생각하면 된다. ReactJS 의 개념? 이라고 이해했다. render() 를 기준으로 전/후로 나뉘고, 간략하게 표현하자면 mount -> render -> mounted 와 같다. (unmount 는 제외하고.) 이를 함수로 자세히보자면 마운트되면서 constructor() 가 render() 되기전에 실행되며, render() 되고 나면 component..