0. TIL :
챗지피티를 통해 코드 최적화할 만한 요소들을 검토한 결과,
최적화시킬 수 있는 여러 방법을 알 수 있었다.
(1) onClick 함수에 데이터 넘겨주기
:이전부터 궁금했던 사항인데 이번에 제대로 짚고 넘어가게 되었다.
(2) Array.from()
: 코드 최적화를 시키기 위한 방법으로 몇번 나왔는데,
잘 사용하지 않던 방법이라서 정리가 필요했다.
1. 배운 내용 정리
(1) onClick 함수에 데이터 넘겨주기
[개선 전]
이전까지는 onClick={handleBtnClick} 이런식으로 작성을 하고,
handleBtnClick을 상단에 따로 정의해두었었다.
그런데 만약에 해당 태그를 클릭할때 전달하고 싶은 값이 있을때는
어떻게 해야할지 몰라서 태그에 data-example={dataExample} 이런식으로 속성에 넣어주고
handleBtnClick 함수에서는 태그의 속성에 접근해서 값을 불러왔다.
[개선 후]
그런데 챗지피티가 알려준 간단한 방법은 훨씬 간단했다.
onClick={() => handleBtnClick(dataExample)}
이렇게 코드로 보고 나니 너무 간단하면서 당연한 방법인데,
바보같이 돌고 돌아서 문제를 해결한 것같다.
그래도 지금이라도 알게 돼서 다행이다..ㅎ
(2) Array.from()
: 문자열이나 유사 배열 객체나 이터러블한 객체를 배열로 만들어 주는 메서드이다.
Array.from(배열로 만들 이터러블한 객체, maping 함수)여기서 배열로 만들 이터러블한 객체에는
{length: 숫자}도 해당한다.
그 이유는, {length: 숫자}도 유사 배열로 인식하기 때문이다.
객체처럼 생겼는데, 유사 배열로 인식하는 이유는
사실 배열은 length라는 속성을 가진 object이기 때문에
object에 length 속성을 넣어주게 되면 유사 배열로 인식하는 것이다.
[참고한 사이트]
3. 적용해보기
[1] onClick함수에 데이터 넘겨주기 : 4420f14acbc8ce9da5cd5219be3d10e90df9307d
[2] Array.from() : 8f21435251972dc878aaaa9c9a27f095b82b5c95
