유틸리티 컴포넌트

이전에 [ 유틸리티 컴포넌트 : Show & Map ]에서 잠깐 언급했었던 것처럼, 나는 꽤 오래 전부터 여러 조건을 일괄적으로 처리하는 Switch와 Match 컴포넌트를 만들고 싶어했다. 대강 어떻게 만들지에 대한 아이디어는 여럿 있었지만, 실제로 구현하려니 문제가 산더미였다.처음에는 타입스크립트를 사용하려 했다. 그러나 수많은 시행 착오 끝에 나는 [ 타입스크립트에서의 컴포넌트 추론 ]의 결론에 도달할 수 있었고, 타입스크립트를 사용하여 Switch 컴포넌트를 정의하려는 나의 아이디어는 물거품이 되어버렸다. 머리를 열심히 굴려보았지만 방법이 없었다. 나는 런타임에서 에러를 던지는 것으로 스스로와 타협했다. 그렇게 만들어진 Switch 컴포넌트는 아래와 같다. 런타임에서 ReactElement는 객체..

나는 다른 라이브러리나 프레임워크의 공식 문서를 보면서 좋은 코드에 대한 아이디어를 얻는 편이다. 그리고 어제는 SolidJS를 살펴보다가 굉장히 재미있는 아이디어 하나를 캐치할 수 있었다.기존에 나는 특정 조건에 따라 컴포넌트를 다르게 처리함에 있어 아래와 같은 방식으로 코드를 작성했다. 아주 일반적인 방법이지만 컴포넌트와 JS 로직이 뒤섞여서 전체적인 코드의 통일감을 해친다는 인상을 받았다.export default function Comp() { const [count, setCount] = useState(0) const list = [1, 2, 3, 4, 5] return ( {count > 5 ? "숫자가 5보다 커요" : "숫자가 5와 같거나 작아요"} ..

리액트를 처음 배우던 시절 나는 비동기 데이터를 다루는 방식의 하나로 useAsync라는 이름의 커스텀 훅을 접하게 되었다. 이는 컴포넌트 내부에서 비동기 작업을 안전하게 처리하기 위한 수단이었는데, 그 코드를 기억나는대로 작성해보자면 아래와 같았다.export const useAsync = (fn) => { const [state, setState] = useState({ data: null, loading: true, error: null }); useEffect(() => { const fetchData = async () => { try { setState((prev) => ({ ...prev, loading: true })); ..