React 2

ESLint에서 react/no-array-index-key 규칙을 만든 이유가 뭘까?

사건의 발단.. react에서는 Array.prototype.map을 통해 동일하지만 값만 다른 컴포넌트를 쉽게 렌더링 할 수 있습니다. 보통 다음과 같은 형태로 많이 사용합니다. ['a', 'b', 'c'].map((item) => {item}) 리액트에서는 위와 같이 동일한 컴포넌트에 대해 각각의 컴포넌트를 구별할 수 있도록 key props를 입력해야합니다. Array.prototype.map 메서드를 간단하게 살펴보면 첫 번째 매개변수로 콜백 함수를 받습니다. 이 콜백 함수의 두 번째 인자는 index임을 알 수 있습니다. arr.map(callback(currentValue[, index[, array]])[, thisArg]) 이 점을 활용하여 과거에 저는 종종 다음과 같이 사용하고는 했습니다..

개발 노트/FE 2022.03.16

useQuery onComplete를 data 프로퍼티로 리팩토링하기

문제의 발견 회사에서 서비스의 사용자 리스트를 페이지당 100명씩 가져와서 보여주는 페이지를 작업 중이었습니다. 이 페이지는 사용자 데이터를 받아서 화면에 렌더링 되기까지 시간이 상당히 걸리는 문제가 있었는데, 그 이유에 대해 파헤쳐 보았습니다. 아래 이미지는 사용자 페이지의 간단한 구조입니다. 먼저 기존에 데이터를 처리하던 방식은 다음과 같습니다. (많은 부분을 생략했습니다..) function UserList() { const [userList, setUserList] = useState([]); const { loading } = useQuery(userList를 불러오는 gql, { variables: {}, onComplete: (res) => { setUserList(res에서 뽑아낸 user..

개발 노트/FE 2022.02.06