[번역] 현실 세계 프런트엔드에서 사용되는 자바스크립트 자료구조: 리액트 코드 예시와 함께
어쩌다가 좋은 글을 발견했다!! 너무나도 도움되고 이해가 쉬운 글임. 예시도 와닿고!! 추천 꼭 읽어보길 바란다. 이글 하나하나 뜯어보면서 공부해봐야징... 글 잘쓰는 분, 코드 잘 치시는 분들 글만 읽어도 공부하는 기분이 들고 아주 좋다. 어제는 노트에 필기하면서 읽었지만 오늘은 블로그에 기록하면서 해보려고 한다. 두고두고 읽고싶거든...
주욱 읽다가 몇차례 스터디를 통해 알게되었고 공부했던 set에 대해 나온 것을 보았다..! Set을 배열의 대안으로서 쓸 수 있다는 것! 오호라? 🧐
Set()
사용자가 선택한 항목 추적하는 데 사용할 수 있다.
나는 이런 테이블을 구현할때 useState를 사용해 초기값으로 빈 배열을 주고 사용자가 체크하면 배열에 추가하는 방식을 쓸 것 같다. 아마도?
그런데 Set을 사용해서도 구현이 가능하다. Set은 메서드를 많이 갖고있었는데 그걸 공부해야겠다 생각해두고 지금까지 잊고있었음...^^ 이참에 위 블로그+MDN을 참고해서 공부해볼까 한다!!
Set()은 중복을 배제한다.
1. useState를 new Set()으로 초기화한다.
이때 Set은 checkdeIds라는 object를 생성한다.
상태는 Set(0) {size: 0}이다.
const [checkedIds, setCheckedIds] = useState(new Set());2. 체크박스타입의 input의 checked는 useState의 현재상태(첫번째요소)이다.
onChange함수에서 id를 인자로 받는다.
그리고 기존의 checkedIds으로 새로운 object를 만든다.
이 값과 인자로 받은 id가 중복되는지 검사한다.
기존의 상태에 id가 있었다면 체크를 해제한 것이고 아니라면 체크를 한 것이다.
판별이 끝났다면 Setter함수로 상태를 업데이트한다.
const onChange = (id) => {
const updateCheckedId = new Set(checkedIds);
if(updateCheckedId.has(id)) {
updateCheckedId.delete(id);
} else {
updateCheckedId.add(id);
}
setCheckedIds(updatedCheckedId);
}3. input checked={selectedIds.has(id)} type="checkbox"
체크박스의 체크여부는 id가 state에 포함되어있는지 여부로 나타낸다.
return (
<table>
<tbody>
{rows.map(({ id, name }) => (
<tr key={id}>
<td>
<input
type="checkbox"
checked={selectedIds.has(id)}
onChange={() => onChange(id)}
/>
</td>
<td>{id}</td>
<td>{name}</td>
</tr>
))}
</tbody>
</table>
);
}Set method
- set.add(1); //Set { 1 }
- set.has(1); //true
- set.delete(1); //값 삭제
- set.size; //0, 값이 삭제되었기때문에
https://profy.dev/article/react-junior-code-review-and-refactoring-1
