리액트 Custom Hook 만들기 과제를 하는데, useInput 커스텀 훅에 집어 넣은 handleSubmit() 함수가 동작 하지 않는 문제가 발생했다.
분명 codespan에서 개인학습할 때 다 풀고 정상 작동 하는 것을 확인했는데, 똑같은 과제인데 repl.it 에서 페어와 같이 풀 때 함수가 동작하지 않아서 당황스러웠다.
알고보니 repl.it에 올라온 과제에는 key값에 id 를 써드 파티 라이브러리인 shortid를 이용한 더미데이터로 만들어 줬던 것이 추가되어 있었다.
- codespan 과제에서는 key값이 그냥 인덱스 번호로 되어 있었다.
그래서 import shortId from 'shortid'; 를 추가했더니 정상 작동 되었다.
리액트에서 Diffing Algorithm을 이용해 렌더링될 때, key를 이용해 기존 트리의 자식과 새로운 트리의 자식이 일치하는지 아닌지 확인하여 일치하지 않는 노드만 변경한다.
따라서 Key는 각 요소마다 유니크한 값(형제 엘리먼트 사이에서 유일한 값, 주로 데이터 더미에서 id를 지정)을 주어야 한다.
유니크한 값이 없다면 최후의 수단으로 배열의 인덱스를 key로 사용할 수 있지만, 배열이 다르게 정렬될 경우 예상과 다르게 동작할 수 있다.
만약 배열의 가장 앞에 새롭게 요소가 추가되어, 모든 엘리먼트의 인덱스가 뒤로 밀린다면, 해당 엘리먼트에 연결되어 있던 상태들은 key 를 기준으로 연결된 엘리먼트를 확인하기 때문에, 상태들이 전부 한 칸 뒤의 엘리먼트와 연결될 수 있다.
또한 배열의 정렬만 바뀌더라도 React는 배열의 전체가 바뀌었다고 받아들이고, 기존의 DOM 트리를 버리고 새로운 DOM 트리를 구축해버리기 때문에 비효율적으로 동작한다.
shortid
id랜덤하게 만들어주는 유용한 라이브러리로 아이디 정하기 애매한 경우 유용하다.
shortid 사용법
터미널에서 shortid 를 설치한다.
yarn add shortid
or
npm i shortid랜덤 id 만들 페이지에 import 한다.
import shortId from 'shortid';shortId.generate()로 데이터를 생성한다.
import shortId from 'shortid';
const dummyPost = (data) => ({
id: shortId.generate(),
content: data,
});colors.js와 faker.js 에는 무슨일이 일어났나?
colors.js와 faker.js 사태가 준 교훈
아직도 Faker 사용법이라고 블로깅 되어 있는 글들이 많은데,
공식 문서는 비어 있다.
faker.js 6.6.6의 이전 버전으로는 사용 가능한 건지..?
faker
추가로 각종 더미데이터를 제공해주는 라이브러리도 있다.
더미데이터가 필요한 내용들의 특성에 맞게 공식문서 참고하여 더미데이터를 만들 수 있다.
faker 공식문서
faker 사용법
shortid와 동일하게 터미널에서 설치하고, import 해서 사용해주면 된다.
yarn add faker
or
npm i fakerimport faker from 'faker';
initialState.mainPosts = initialState.mainPosts.concat(
Array(20).fill().map(() => ({
id: shortId.generate(),
User: {
id: shortId.generate(),
nickname: faker.name.findName(),
},
contnet: faker.lorem.paragraph,
Images: [{
src: faker.image.image(),
}],
Comments: [{
User: {
id: shortId.generate(),
nickname: faker.name.findName(),
},
content: faker.lorem.sentence(),
}],
})),
);참고 : 더미데이터 만드는 유용한 라이브러리(shortid, faker)
자바스크립트로 가짜 데이터 생성하기 - Faker.js
