[TIL-141] 위코드 42일차:

eventlistener 콜백함수 안에 인자 전달하기

onClick={handleBtn(num)} 이렇게 일반적인 함수처럼 parameter에 num을 쓰면 함수에 괄호가 붙어서 자바스크립트가 이 코드를 읽는 즉시 그 자리에서 실행되어버린다. 그래서 콜백함수를 화살표 함수로 주고, 화살표 함수 안에서 num을 인자로 받은 handleBtn을 실행해야 한다.

onClick={ () => {
	handleBtn(num);
}

 

 

 

input 체크박스 값 받아서 filter 요청 보내기

label 연결하기

   <label htmlFor="sizeOne">
    <input
      id="sizeOne"
      type="checkbox"
      name="size"
      onChange={handleCheck}
    />
    mini
  </label>
  <label htmlFor="sizeTwo">
    <input id="sizeTwo" type="checkbox" name="size" value="2" />
    1호
  </label>
  <label htmlFor="sizeThree">
    <input id="sizeThree" type="checkbox" name="size" value="3" />
    2호
  </label>
  <label htmlFor="sizeFour">
    <input id="sizeFour" type="checkbox" name="size" value="4" />
    3호
  </label>

<label>을 <input>에 연결하려면 input의 id를 label의 for(JSX에서는 htmlFor)의 값으로 주면 된다. 그런데 checkbox 타입의 input의 경우, label 태그 안에 넣음으로써 연결할 수도 있다.

또, 여러 개의 checkbox는 같은 name 속성값을 줘서 연관성을 보여준다.

참고) [html 태그] input, label 태그 (속성, 특징)https://abcdqbbq.tistory.com/63

 

state 사용

각 input들의 checked 값이 바뀔 때마다 checked=true인 input의 size 번호를 state에 배열의 형태로 저장. 그럼 나중에 배열의 모든 요소를 하나의 문자열로 합쳐서 query parameter에 size의 값으로 보냄.

 

form 제출 시 method 요청 보내기

문제 : size=1&size=4 이런 식으로 쌓여서 비효율적. size=1,4 이렇게 하고 싶은뎅...

참고) HTML / input / checkbox / 체크박스 만들기  https://www.codingfactory.net/11570

 

 

<select>