실제 사용을 위한 서비스들은 대부분 swr이나 react-query와 함께 비동기 통신을 묶어서 쓰는데 그 이유가 뭘까? 먼저 첫번째는 비동기 처리 상태에 따른 상태처리가 용이하다는 점이다. const Component = () => { const [isLoading, setIsLoading] = useState(false); const [data, setData] = useState({}); const [dataError, setDataError] = useState('404'); //... } 일반적인 비동기 통신 처리 이후에는 사이드 이펙트 처리를 통해 무려 3개의 상태를 만들면서 성공했을 시의 데이터, 패칭이 끝났는지 확인, 에러가 났다면 에러의 종류 등을 각각 관리해줘야한다. 데이터 패칭 도구 ..

HOC를 사용할 때 가장 어려운 점은 HOC로 부터 내려받는 props가 아니라, 다른 로직을 위한 props를 받는 경우이다. (사실 HOC보다는 제네릭 사용으로 인해 생긴다고 생각한다.) 먼저, HOC를 위해 구현한 withLatestVersion.tsx를 보면서 어떻게 이 함수가 랩핑할 컴포넌트의 props를 추출하는 지 살펴보아야한다. // withLatestVersion.tsx import React, { useEffect, useState } from 'react'; import { DataState, LtsVersionType } from '../type/type'; import { useQuery } from '@apollo/client'; import { LOL_PATCH_VERSIONS..

React에 HOC 라는 컴포넌트가 실무에서 auth 용도로 사용된다는 걸 얼핏 봤었다. HOC의 구조가 특이하다보니 자료를 찾아보면서도 이렇게 쓰면 되겠다 싶은 느낌이 잘 안오기도 했지만, 언제 사용하면 좋겠다 정도의 느낌만 있었다. 이번에 프로젝트를 하면서 HOC를 써보기 좋은 구조가 나와서 직접 구현해보고 공유해보려고 한다. 1. HOC가 뭐고 언제 유용한가요? 공식 문서에는 아래와 같이 나와있다. 고차 컴포넌트(HOC, Higher Order Component)는 컴포넌트 로직을 재사용하기 위한 React의 고급 기술입니다. 고차 컴포넌트(HOC)는 React API의 일부가 아니며, React의 구성적 특성에서 나오는 패턴입니다. 구체적으로, 고차 컴포넌트는 컴포넌트를 가져와 새 컴포넌트를 반환..

라이엇에서 기본 제공해주는 API가 여러 가지가 있습니다. 계정 정보나 티어 같은 정보를 GET 할 수 있는 API부터 기본 챔피언 정보를 객체로 받아볼 수 있는 ddragon 까지 존재하는데, 그냥 가져다 써서 파싱하는 거보다 챔피언 툴팁에 curly 변수로 선언되어있는 변수를 치환하는 과정을 설명해보려고 합니다. 아무무 Q 스킬로 살펴보는 정보 객체 분석 주요깊게 봐야할 것은 툴팁인데, 롤 클라이언트나 전적검색 사이트에서 볼 수 있는 스킬 설명이라고 이해하면 됩니다. api에서 받아볼 수 있는 특정 스텟이나 내부에서 관리되는 상태가 있는 경우에는 커스텀된 태그가 있고 그 안에 Curly bracket으로 변수가 선언되어있습니다. 아무무의 Q스킬을 좀 더 자세하게 봐보겠습니다. "아무무가 붕대를 던져 ..

0. 배경 React의 props로 Generic을 넘겨줘야 할 일이 종종 있는데 대표적으로 드롭다운(셀럭터)를 만들 때가 바로 그렇다. 직관적으로 생각해보면 새로 컴포넌트 인스턴스를 생성할 때 적절한 타입을 캐스팅 해주면 되지 않을까 싶은데 React.FC에서 Generic이 지원되지 않는다는 점에서 문제가 일어난다. 이 글에서는 드롭다운에서 Generic을 왜 넘겨줘야하는지 그 전략과 어떻게 해결했는지 공유해보려고 한다. 1. 왜 제네릭을 사용하려고 하는가? onChangeSortFilter(item.customData)} /> 드롭다운을 구현할 때 크게 고려해야할 것은 두 가지이다. UI로 나타낼 string. 상태관리 등 내부 로직에 필요한 커스텀 데이터. 드롭다운을 클릭 했을 때 부모 컴포넌트에..

React에서 종종 있는 일일 수도 있고, 누군가는 당연히 알고 있을 수도 있지만.. assets에 있는 static 이미지를 한 10개 가져와야한다고 하면, 어떻게 가져올 것인가? import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; import IMAGE1 from "@asssets/image1"; ... 설마 이렇게..? (사실 내 첫 리액트 프로젝트..