React로 앱을 만들다 보면 서버에서 데이터를 가져오는 코드를 정말 자주 작성하게 됩니다. useEffect() 안에서 fetch()를 호출하고 useState()로 로딩 상태와 에러 상태를 관리하고 데이터가 오면 상태를 업데이트하고... 이 패턴을 몇 번이고 반복하다 보면 문득 이런 생각이 들지 않나요? "매번 같은 코드를 쓰고 있는데, 이걸 더 잘 처리하는 방법은 없을까?" 🤔 여기에 캐싱, 재시도, 백그라운드 갱신, 낙관적 업데이트까지 고려하면 상황은 더 복잡해집니다. 이런 문제를 정면으로 해결하기 위해 만들어진 라이브러리
많은 양의 데이터를 다루는 서비스에서 검색 기능은 필수적이죠? 이번 포스팅에서는 아래와 같은 웹에서 흔히 볼 수 있는 검색 UI를 React로 함께 구현해보겠습니다. 검색창 컴포넌트 구현 검색창(SearchBox) 컴포넌트에는 사용자가 검색어를 입력하므로 기본적으로 HTML의 <input> 요소를 사용합니다. 이때, 접근성을 위해 type 속성을 search로 설정해 주세요. 스크린 리더 사용자에게는 매우 중요한 정보이기 때문입니다. 부모 요소에서 상태 관리를 하기 위해서 <SearchBox /> 컴포넌트는 prop으로 value와
전자 상거래와 같이 많은 양의 데이터를 다루는 서비스에서 필터(filter)는 사용자가 데이터를 추려낼 수 있는 도와주는 매우 중요한 UI입니다. 이번 포스팅에서는 아래와 같은 간단한 상품 목록 페이지를 구현하면서 필터(filter) UI를 어떻게 React로 개발하는지 알아보겠습니다. 상품 목록 컴포넌트 구현 우선 단순히 모든 상품 목록을 보여주는 React 컴포넌트를 작성하겠습니다. <Products/> 컴포넌트는 prop으로 상품 배열(products)와 로딩 여부(loading)를 받습니다. 그리고 아직 데이터를 로딩 중이라
React로 SPA(Single Page Application)를 개발하는 경우 window.location 객체에 접근할 때 여러가지 문제가 발생할 수 있는데요. SPA에서는 보통 클라이언트 단에서 랜더링을 하기 때문에 브라우저의 location 객체를 사용할 때 조금 더 세심한 고려가 필요합니다. 이번 포스팅에서는 React 앱에서 브라우저의 location 객체에 안전하게 접근하는 방법과 이를 위한 커스텀 훅(hook)을 구현해보도록 하겠습니다. 브라우저의 location 전역 객체 우선 브라우저의 location 객체에 대해
React 프로젝트에서 대부분의 외부 스크립트는 npm 패키지로 설치해서 불러올 수 있지만 간혹 npm 패키지가 제공되지 않는 경우도 있습니다. 이럴 경우 어쩔 수 없이 웹에서 전통적으로 외부 스크립트를 불러오는 방법인 HTML 문서의 <script> 태그를 사용할 수 밖에 없는데요. 이번 포스팅에서는 React 컴포넌트에서는 어떻게 <script> 태그로 외부 자바스크립트 불러울 수 있는지에 대해서 알아보도록 하겠습니다. index.html 파일 안에 script 태그 추가하기 일반적으로 React 프로젝트에는 public 폴더나
지난 포스팅에서는 커스텀(custom) React Hook을 사용하여 양식(form) UI를 구현해보았는데요. 이번 포스팅에서는 이와 유사한 방식으로 React Hook 기반의 API를 제공하는 React Hook Form 라이브러리에 대해서 알아보려고 합니다. 새로운 라이브러리를 배우는 가장 효과적인 방법은 그 라이브러리를 이용해서 무언가를 만들어보는 것이 겠죠? 본 포스팅을 끝까지 따라오시면 아래와 같은 로그인 폼(form)을 만드실 수 있으실 거 에요 😁 패키지 설치 React Hook Form 라이브러리는 자바스크립트 패키
페이지네이션(pagination)은 여러 개의 게시물을 보여주는 웹사이트에서 보통 화면 하단에서 흔히 볼 수 있는 UI입니다. 이번 포스팅에서는 아래와 같이 간단한 페이지네이션(pagination) UI를 구현하는 방법에 대해서 알아보겠습니다. 전체 게시물 목록 구현 우선 단순히 모든 게시물의 목록을 보여주는 React 컴포넌트를 페이지네이션이 없이 구현해볼까요? 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져오도록 하겠습니다. <Posts/>라는 함수 컴포넌트를 작성하고, useState()
React v16.8에서 리액트 훅(React Hook)이 소개된 이후로 많은 프로젝트에서 커스텀(custom) 훅 함수를 사용하고 있는 것 같은데요. 이번 포스팅에는 리액트 훅(React Hook)을 테스트하는 방법에 대해서 알아보겠습니다. 예제 React Hook 먼저 테스트 대상이 될 간단한 React Hook 함수 하나를 작성해보겠습니다. 아래 useToggle() 함수는 true 또는 false가 될 수 있는 상태 state와 그 상태값을 반전할 수 있는 함수 toggle()을 배열에 담아 반환합니다. 초기 상태값을 ini
React 컴포넌트에 ref prop을 넘겨서 그 내부에 있는 HTML 엘리먼트에 접근을 하게 해주는 forwardRef() 함수에 대해서 알아보겠습니다. HTML 엘리먼트의 ref prop React에서 ref prop은 HTML 엘리먼트의 직접 접근하기 위해서 사용됩니다. 예를 들어, 아래 <Field/> 컴포넌트에서는 useRef() 훅(hook) 함수로 생성한 inputRef 객체를 <input/> 엘리먼트의 ref prop으로 넘기고 있습니다. 이렇게 해주면 inputRef 객체의 current 속성에 <input/> 엘리
React로 웹 애플리케이션을 개발하다 보면 간혹 React 컴포넌트가 아닌 HTML 엘리먼트에 직접 접근해서 DOM API를 이용해서 제어해야 할 필요가 있는데요. 이번 포스팅에서는 이럴 때 유용하게 사용할 수 있는 React의 독특한 prop인 ref 에 대해서 알아보도록 하겠습니다. ref prop React의 ref prop은 HTML 엘리먼트의 레퍼런스를 변수에 저장하기 위해서 사용합니다. 예를 들어, 다음과 같이 <input> 엘리먼트에 ref prop으로 inputRef라는 변수를 넘기게 되면, 우리는 이 inputRe
React 앱을 개발하다보면 네트워크를 통해 REST API나 GraphQL API를 호출하여 원격에 있는 데이터를 가져와야 하는 일이 빈번하게 생기는데요. 이번 포스팅에서는 React 훅 함수를 이용해서 원격 API를 깔끔하게 호출하는 방법에 대해서 알아보겠습니다. useEffect()로 원격 데이터 가져오기 보통 원격 API를 호출하는 작업은 컴포넌트 랜더링을 막지않기 위해서 비동기로 처리하기 경우가 대부분인데요. 이러한 Side Effect 처리를 위해 React에서는 useEffect 훅 함수를 제공하고 있습니다. 예를 들어
이번 포스팅에서는 React에서 웹 스토리지를 사용해서 컴포넌트의 상태를 유지시키는 방법에 대해서 살펴보겠습니다. useState()로 유실되는 상태 관리하기 React에서 제공하는 useState() 훅 함수를 사용하면 컴포넌트의 상태를 간편하게 관리할 수 있는데요. 예를 들어, 버튼 클릭 횟수에 대한 상태 관리가 필요한 간단한 카운터 컴포넌트를 작성해보겠습니다. 너무 당연한 얘기겠지만 페이지를 새로 고침하는 순간 기존의 count 상태값은 사라집니다. 만약에 이 컴포넌트의 상태값을 웹 스토리지를 이용해서 유지시키고 싶다면 어떻게
이번 포스팅에서는 useMemo() 함수와 더불어 성능 최적화에 사용되는 React의 useCallback() hook 함수에 대해서 알아보겠습니다. useMemo에 대한 내용은 관련 포스팅를 참고하시기 바랍니다. 함수 메모이제이션 useCallback()은 함수를 메모이제이션(memoization)하기 위해서 사용되는 hook 함수입니다. 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해줍니다. 예를 들어, 어떤 React 컴포넌트 함수 안에 함수가 선언이 되어 있다
React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 setState() 함수인데요. 좀 더 복잡한 상태 관리가 필요한 React 컴포넌트에서는 setReducer() hook 함수를 사용할 수 있습니다. React Hooks 중 하나인 setState() 함수에 대한 설명은 관련 포스팅를 참고 바랍니다. Redux 패턴 기본적으로 useReducer() hook 함수는 다음과 같은 형태로 사용을 합니다. reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운
Git의 pre-commit 훅(hook)은 우리가 작성한 코드를 커밋할 때 마다 자동으로 특정 작업을 실행해줍니다. 많은 프로젝트들이 이를 통해 포맷터(formatter)를 실행하여 코드 스타일을 통일하고, 린터(linter)를 실행하여 코드에 잠재하고 있는 문제들을 찾아냅니다. 이번 포스팅에서는 Git의 pre-commit hook을 편리하게 사용할 수 있도록 도와주는 pre-commit라는 도구에 대해서 알아보겠습니다. 설치 pre-commit은 자신의 컴퓨터에 파이썬이 설치가 되어 있다면 파이썬의 패키지 매니저인 pip를 사
React Hooks 중에서 useState()나 useEffect() 처럼 많이 쓰이지는 않지만 가끔 나와서 햇갈리게 하는 녀석이 있습니다. 바로 useRef() 훅(hook) 함수인데요. 이번 포스팅에서는 useRef() 함수가 왜 필요하고, 언제 사용하는지에 대해서 알아보겠습니다. 상태 변경 -> 컴포넌트 재 랜더링 React 컴포넌트는 기본적으로 내부 상태(state)가 변할 때 마다 다시 랜더링(rendering)이 됩니다. 예를 들어, 아래 <Counter/> 컴포넌트의 버튼을 5번 클릭하면 count 상태값은 5번 바뀌
양식(form)은 사용자로 부터 데이터를 입력 받기 위해 웹애플리케이션에서 필수적인 요소임에도 불구하고, 리액트(React)로 직접 구현을 해보면 생각보다 고려해야 부분이 많다는 것을 느끼게 됩니다. 이번 포스팅에서는 React Hook를 이용해서 좀 더 깔끔하게 양식 UI를 구현하는 방법에 대해서 알아보겠습니다. 상태 관리 코드 분리하기 기본적으로 하나의 <form/> 여러 개의 <input/>, <select/>, <textarea/>으로 구성됩니다. 이렇게 사용자가 입력해야 값이 많아질수록 양식은 내부적으로 많은 상태를 가지게
양식(form)은 웹 애플리케이션에서 사용자로 부터 데이터를 입력 받기 위해 필수적인 UI 요소이죠? 그런데 리액트(React)로 직접 양식 UI를 구현해보면 처음에 생각했던 것보다 고려해야 할 부분이 많다는 것을 깨닫게 되는데요. 이번 포스팅에서는 비밀번호를 변경하기 위한 전형적인 양식 UI를 React 컴포넌트로 구현하면서 어떤 부분에 신경을 써서 프로그래밍을 해야 하는지 알아보겠습니다! JSX 마크업 먼저 하나의 입력란과 제출 버튼으로 구성된 간단한 양식에 대한 마크업을 작성해보겠습니다. <form/> 부모 엘리먼트 아래에 <
React Hooks 중 하나인 useMemo 함수를 왜/언제/어떻게 써야하는지 알아보겠습니다. Memoization useMemo 함수에 대해서 알아보기 전에 알고리즘 시간에 자주 나오는 메모이제이션(memoization) 개념에 대해서 잠깐 짚고 넘어가겠습니다. memoization이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법을 말합니다. memoization을 절적히 적용하면 중복 연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 애플리케이션의 성능을 최적화할 수
Side Effect 처리를 위해 React Hooks에서 제공되는 setEffect() 함수에 대해서 알아보도록 하겠습니다. Side Effect란? React 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 일컽습니다. 대표적인 예로 어떤 데이터를 가져오기 위해서 외부 API를 호출하는 경우, 일단 화면에 렌더링할 수 있는 것은 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장됩니다. 요청 즉시 1차 렌더링을 함으로써 연동하는 API가 응답이 늦어지거나 응답이