[TIL]21.06.10

👨‍💻 오늘 공부한 것

Section1 HA시험을 다시 보고..

한층 더 수월해진 덕인지 문제 해결을 하는 데, 조금 더 침착하고 체계적으로 시간을 사용한 것 같다. 빨리 배우고 수료해서 취업하고 싶은 마음이 바다같지만 페인트를 좀 더 찐하게 칠했다는 뿌듯한 마음가짐으로 다음 섹션을 준비하자...

---

이벤트핸들러 사용법

1. 이벤트핸들러에 함수를 할당하고, 그 함수안에 콜백함수로 state를 갱신하는 함수를(useState로 선언한) 리턴하면 굳이 이벤트 객체를 쓰지않고도 a태그같은경우 뭐가 클릭됬는지 콜백함수의 인자로 알 수 있는, 확인할 수 있는 값을 넣어주면 동적인 기능을 구현할 수 있다.

onClick이란 이벤트핸들러에 함수 하나를 할당해주게되면 그 함수는 인자로 이벤트객체하나만 사용되므로 다른 인자를 사용하고 싶다면 다음과 같이 사용하면된다. (함수를 반환하는 고차함수개념을 사용한 것)

또한 그럴 필요가 없을 때는 이벤트객체를 사용해도 무방하다. 센스있게 사용하자.

const [value, setValue] = useState(0);

const handleValue = (_value) =>{
	console.log(_value);
}

{
  for(let i = 0; i < 3; i++){
	<a onClick={function(){
  	handleValue(`${i + 1}번클릭`);
  }}></a>
   }
}

Element.appendChild()

만약 document.create('li')로 만든 li태그에 각 이벤트핸들러와 클래스이름을 가지고 있는 태그들을 append, 추가하고 싶다면 처음에는 append해도 되지만 두번째부터 추가할 때에는 appendChild()로 추가할 것

Dom으로 이벤트핸들러에 함수할당하여 사용하는 법

let arr = ['Ha', 'Park', 'Caerin', 'Juhong']

const printName = (_value) => {
	console.log(_value);
}

function makeLi(arr){
	let liMaker = document.createElement('li');
  	for(let i = 0; i < arr.length; i++){
      	   let aMaker = document.createElement('a');
      	   aMaker.classList.add = 'arr[i]';
      	   aMaker.onclick = function(){
           	printName(arr[i]);
           } // 고차함수를 사용함, printName를 콜백함수로 사용함
      	   liMaker.append(aMaker);
    }
}

다음과 같이 DOM으로 onclick에 함수를 할당하고 싶은 데 변수를 인자로 받고싶다? 그렇다면 고차함수, 콜백함수를 사용해야한다. 예를들어 onClick에 함수 하나만 할당하게 되면 인자를 받을 수 없기때문이다. (왜 인지는...)

다음과 같이 오류나는 코드는 함수를 호출한 후 그 함수의 주소를 onClick에 할당한다.

그럼 인자를 써버린 후에 append로 추가되기 때문에 막상 html에서는 인자를 사용하지 못하므로, undefined가 콘솔에 출력될 것이다.

오류나는 코드
aMaker.onClick = printName(arr[i]);