프론트엔드 개발을 하다보면 흔히 마주할 수 있는 상황이다. Select, Toggle 또는 DatePicker 등의 인풋 컴포넌트들을 설계할 때, 그 컴포넌트들을 핸들링할 커스텀훅도 같이 작성해 사용할 수 있다. 보통은 useToggle, useSelect 등의 이름으로 쓰고 [value, onChange] 같은 배열을 return해 사용한다. 외주 개발을 하면서 초기에 이런 컴포넌트 작업을 해야할 일이 많았다. import useSelect from '~hooks/useSelect'; import Select from '~components/Select'; const App = () => { const [value, handleSelectValue] = useSelect(); return ( ); };..
TypeScript
귀찮은 일은 꽤나 자주 일어난다. 외주 작업 중 테이블 컴포넌트를 구현해야하는 일이 있었고, 기존 코드는 Core UI라는 라이브러리를 사용하고 있었다. 라이브러리가 4.0버전으로 업그레이드 되면서 PRO버전이 새로 생겼고, 그를 위한 급나누기에 테이블 컴포넌트가 걸려버렸다. 기존에 사용하던 onRowClick, scopedSlots등의 기능들이 사라졌고 직접 구현해야 했다. { navigate(`/notices/${data.id}`); }} customCellItem={{ info: data => alert(data.index)}>커스텀cell, date: data => {data.date}, }} />; 추상화된 Table은 상위 컴포넌트는 위와 같이 사용할 수 있다. 컬럼과 data 배열을 넘겨주면..
개발을 할때 새로운 무언가를 맞닥뜨리는 경우가 줄어들어서 그런가, 코드를 이쁘게 짜는 것에 관심이 많아졌다. 두둥을 개발하면서 마주친 고민들을 공유해보려고 한다. 리액트로 개발하다보면 선언적인 코드에 대해서 고민하게 된다. 리액트 자체가 선언형이기 때문일수도. 선언적인 코드 명령형 프로그래밍과 선언형 프로그래밍에 대한 글들에선 흔히 'How'와 'What'의 차이로 설명한다. 반복문을 통해 배열의 원소를 순회하면서 html요소를 생성하고 보여주는 코드이다. 어떤 절차로 이루어지는지가 드러나 있다. const arr = [1, 2, 3, 4, 5]; return ( {arr.map((elem) => ( {elem} ))} ); React에서 jsx 문법을 사용하면 이렇게 표현할 수 있다. 핵심 데이터만 외..
1차 프로젝트에 있는 코드를 그대로 옮겨오면 될거라 생각을 했는데, 예상보다 꽤 오랜 시간 삽질을 했다. 내가 못찾는건지 타입에 대한 정보가 별로 없었음. 일단 문서를 보고 이러쿵 저러쿵 하니 되긴 했는데, 이게 정확한 방법인지는 모르겠다. 일단 잘 돌아가니 기록. 저번과 마찬가지로 패키지 매니저에서 socket.io-client 를 설치해준다. 그리고 타입 정의를 해주려고 했는데, 안쓰는게 좋을 것 같다는건 알겠다.. 일단!! import io, { Socket } from 'socket.io-client'; io와 함께 Socket도 import 해준다. const [socket, setSocket] = useState(); 소켓 객체를 생성해 state에 저장하는 방식이었다. 원래 Socket 타입..
응원톡 페이지를 위해 무한스크롤을 구현했던 기록이다. 근데 이제 리액트쿼리의 useInfiniteQuery를 곁들인. 처음엔 단순하게 state를 이용해서 무한스크롤을 만드는 로직을 생각하고 접근했다가 삽질을 좀 했다. setList(prev => [...prev, ...res.data.list]); 새 데이터를 패칭을 하게 되면, 기존에 있던 배열 상태에 새로 받아온 데이터를 추가한다. 스프레드 연산자 또는 concat을 사용할 수 있다. 근데 useInfiniteQuery를 사용하면 살짜쿵 다름. 1. useInfiniteQuery const { data, fetchNextPage } = useInfiniteQuery( ['talks'], UsersApi.getTalks, { getNextPagePa..
