태그: 리액트

[GraphQL/React] Apollo Hooks로 React 앱 개발하기

지난 포스트에서는 Apollo Hooks라는 새로운 방법을 통해 React 앱에서 어떻게 GraphQL API를 호출할 수 있는지 간단히 살펴보았습니다.이번 포스트에서는 지난 포스트에서 다뤘던 useQuery() 함수 뿐만 아니라 useMuation() 함수까지 사용해서 간단한 노트(Note) 앱을 React로 작성해보도록 하겠습니다. Apollo Hoo

[GraphQL/React] Apollo Hooks 소개/사용법

지난 달, Apollo Client에서 공개되어 현재 뜨거운 반응을 얻고 있는 Apollo Hooks에 대해서 알아보겠습니다. Apollo Client가 생소하신 분들은 아래 포스트를 먼저 보시고 이 포스트로 돌아오시는 것을 추천드립니다. [GraphQL] Apollo Client 사용법 Apollo Hooks?Apollo Hooks는 Apollo

React Router로 중첩 라우팅 하기

지난 포스트에서 React Router로 기본적인 라우팅 방법을 다루었습니다.이번 포스트에서는 React Router로 중첩 라우팅을 구현하는 방법에 대해서 알아보겠습니다. 중첩 라우팅이란?중첩 라우팅(Nested Routing)이란 라우팅 맵핑을 최상위 컴포넌트 뿐만 아니라 여러 개의 컴포넌트에 걸쳐서 단계별로 정의하는 라우팅 기법입니다. 예를 들어, 브

PropTypes로 React 입력 타입 체크하기

PropTypes는 React에서 타입 체크를 위해서 사용되는 라이브러리입니다.이 번 포스트에서는 PropTypes를 이용해서 React 컴포넌트의 prop에 대한 타입 정의와 기본값 설정을 하는 방법에 대해서 알아보겠습니다. 패키지 설치PropTypes 라이브러리는 prop-types이라는 패키지 이름을 가지고 있는데요.기본적으로 react 패키지에 내장

[React] Styled Components 사용법

지난 포스트에서 외부 라이브러리 없이 CSS 만으로 React 컴포넌트를 스타일링하는 방법을 알아보았습니다.이번 포스트에서는 대표적인 CSS-in-JS 라이브러리인 Styled Components를 사용해서 React 컴포넌트를 스타일링하는 방법을 살펴보겠습니다. CSS in JS?먼저 CSS in JS의 개념을 짚고 넘어가겠습니다.CSS in JS는 스타

[GraphQL] Apollo Client로 React 앱 개발하기

Apollo Client는 GrpahQL API를 호출하기 위해 사용되는 라이브러리입니다.이번 포스트에서는 React 앱에서 Apollo Client를 사용하여 GraphQL API를 호출하는 방법에 대해서 알아보겠습니다. 사실, GraphQL API를 호출할 때, 반드시 Apollo Client와 같은 전용 클라이언트가 필요한 것은 아닙니다.GraphQL

React 컴포넌트 CSS 스타일링 기본

React 공식 레퍼런스에 따르면 React에서는 명확한 스타일 가이드를 제공하지 않습니다. React does not have an opinion about how styles are defined. 그도 그럴 것이 현재 CSS 기술 자체가 사용되는 방식이 워낙 다양하기 때문에 React에서 꼭 찝어 어느 방식을 따르라고 얘기하기가 조심스러울 것입니다

React Testing Library 사용법

React Testing Library(RTL)라는 테스팅 라이브러리가 React 개발자들의 입소문을 타고 점점 인기가 올라가고 있습니다.이번 포스트에서는 최근 React에서 테스팅 트랜드와 패러다임을 바꾸고 있는 React Testing Library에서 다뤄보도록 하겠습니다. React Testing Library 소개React Testing Libra

React Router로 라우팅 하기

React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다.이 번 포스트에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자

React에서 Font Awesome 사용하기

Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다.이번 포스트에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다. React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스트를 참고 바랍나다. Font Awesome 5의 SVG 지원Font Awes