React를 이용해서 SPA(Single Page Application)을 개발할 때 흔히 겪는 어려움 중에 하나가 웹페이지 라우팅입니다. 이번 포스팅에서는 React Router라는 라이브러리를 사용해서 SPA에서 라우팅을 하는 방법에 대해서 알아보겠습니다. 간단한 라우팅 구현 기본적으로 SPA는 index.html 파일에 div 엘리먼트만 하나 두고, 자바스크립트로 모든 부분을 동적으로 랜더링하는 구조를 취합니다. 그리고 화면의 전체 또는 일부를 브라우저에서 발생하는 이벤트에 따라서 동적으로 갱신할 수 있기 때문에 인터랙티브 한
Font Awesome은 웹에서 아이콘이 필요할 때 가장 많이 사용되는 라이브러리 중에 하나입니다. 이번 포스팅에서는 React 앱에서 Font Awesome을 사용하는 방법에 대해서 알아보도록 하겠습니다. React와 무관한 Font Awesome 자체에 대한 설명은 관련 포스팅를 참고 바랍나다. Font Awesome 5의 SVG 지원 Font Awesome 4 대비 Font Awesome 5의 가장 강력한 부분은 SVG 기반 아이콘을 지원한다는 것입니다. 즉, 기존에 웹폰트를 기반으로 하는 <i/> 태그 대신에 SVG 기반인
Side Effect 처리를 위해 React Hooks에서 제공되는 setEffect() 함수에 대해서 알아보도록 하겠습니다. Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이
컴포넌트의 상태 관리를 위해 React Hooks에서 제공되는 setState() 함수에 대해서 알아보도록 하겠습니다. this.state - 클래스 기반 상태 관리 React Hooks가 나오기 전에는 컴포넌트의 상태 관리를 하려면 클래스 기반 React 컴포넌트를 작성해야 했습니다. 대표적으로 상태 관리가 필요한 경우인, 사용자 입력 양식을 위한 컴포넌트를 작성한다고 생각해보겠습니다. 아래 예제 코드는 사용자의 이름과 이메일을 입력받기 위한 전형적인 React 컴포넌트입니다. 클래스 컴포넌트의 this.state 필드에 이름과
리액트 앱을 개발하다보면 모든 컴포넌트에 어떤 값을 props으로 넘기고 싶은 데이터가 필요할 때가 있습니다. 다시 말해, 어떤 컴포넌트 트리 내에서 최상위 컴포넌트 부터 최말단 컴포넌트에 걸쳐 전역(global)으로 관리해야 할 데이터가 필요한 상황이 되겠네요. 이번 포스팅에서는 React Context를 활용하여 리액트 앱에서 전역 데이터를 관리하는 방법에 대해서 알아보도록 하겠습니다. React Context 없이 개발하기 먼저 React Context 없이 props만을 이용해서 어떻게 전역 데이터를 여러 컴포넌트에 걸쳐서